Hypnocircles

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
  canvas {
    width: 960px;
    height: 500px;
  }
</style>
</head>
<body>
<canvas width="1920" height="1000"></canvas>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
  var canvas = document.querySelector("canvas"),
      context = canvas.getContext("2d"),
      width = +canvas.width,
      height = +canvas.height,
      duration = 4000,
      innerRadius = 200,
      rings = 12;

context.translate(width / 2, height / 2);

d3.timer(function(t){
    t = 2 * Math.min(t % duration / duration, 1 - t % duration / duration);

context.clearRect(-width / 2, -height / 2, width, height);

var factor = 5 + 30 * t,
        r = 0;

d3.range(rings).forEach(function(i){
      var count = i ? Math.round(i * factor) : 1,
          newRadius = i ? outerRadius(r, count) : innerRadius;

context.fillStyle = d3.interpolateRainbow(1 - (t + i / rings) % 1);
      context.beginPath();

d3.range(count).forEach(function(j){

var angle = 2 * Math.PI * j / count + Math.PI / 2,
            x = i ? (r + newRadius) * Math.cos(angle) : 0,
            y = i ? (r + newRadius) * Math.sin(angle) : 0;

context.moveTo(x, y);
        context.arc(x, y, newRadius, 0, 2 * Math.PI);

});

context.fill();

r += i ? newRadius * 2 : newRadius;
    });

});

function outerRadius(r1, n) {
    return Math.sin(Math.PI / n) * r1 / (1 - Math.sin(Math.PI / n));
  }

</script>
</body>

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