faded circles

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <style>
      * {
        box-sizing: border-box;
      }

body,
      svg,
      canvas {
        margin: 0;
        padding: 0;
      }

</style>
  </head>
  <body>
    <div id='container'></div>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>

let w = window.innerWidth,
        h = window.innerHeight

let svg = d3.select('#container').append('svg')
        .attr({width: w, height: h})

setInterval(function () {
        makeCircle([Math.random()*w, Math.random()*h])
      }, 250)

function makeCircle (coords) {
        svg.append('circle')
          .attr({cx: coords[0], cy: coords[1], r: 0, fill: 'none', stroke: 'hsl(' + Math.random()*360 + ',100%,70%)', 'stroke-width': 1})
          .style({opacity: 1})
          .transition().duration(1500)
            .attr({r: 100})
            .style({opacity: 0})
            .each('end', function () { d3.select(this).remove() })
      }

</script>
  </body>
</html>

https://d3js.org/d3.v3.min.js