Hypnotic circles

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <title>home</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  </head>

var data = []
        for (var i = 0; i < 128; i++){
          data.push(i)
        }

svg.selectAll(".circle").data(data).enter()
          .insert("circle")
          .attr("class", "circle")
          .attr("cx", 800/2)
          .attr("cy", 600/2)
          .attr("r", function(d,i){
            return 0 
          })
          .attr("stroke", function(d,i){
            return d3.interpolateCool(1 - i/(data.length))
          })
          .attr("stroke-width", "2px")
          .attr("fill", function(d,i){
            if (i == 1){
              return d3.interpolateCool(1)
            } else {
              return "rgba(255,255,255,0)"
            }
          })
          
          .transition()
            .duration(1000)
            .delay(function(d, i) { return (data.length - i) * 100; })
            .ease(d3.easeLinear)
          .attr("r", function(d,i){
            return 1000
          })
          .attr("stroke-width", "200px")

</script>

</body>
</html>

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

https://d3js.org/d3-scale-chromatic.v1.min.js