Animation Test Canvas

<!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var width = 960,
    height = 500,
    dotCount = 800,
    columns = 400,
    dots = d3.range(dotCount).map(d => Math.random()*0.1 + 0.5*Math.floor(d/columns)),
    dotSize = width / dotCount,
    cycle = 1000;
var path = gear();

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");
context.strokeStyle = "black";
context.strokeWidth = .1;

d3.timer(function() {
  context.setTransform(1, 0, 0, 1, 0, 0);
  context.clearRect(0, 0, width, height);
  
  dots.forEach(function(d, i) {
    context.setTransform(1, 0, 0, 1, 
        width * ((i/columns) % 1.0),
        height * Math.abs(((d + (Date.now()/cycle)%1.0) % 1.0) * 2 - 1)
    );
    context.fillStyle = d3.hcl(360 * i/dotCount, 50, 75);
    context.fill(path);
    context.stroke(path);
  });
});

function gear() {
  var teeth = 8;
  var n = teeth,
      r2 = Math.abs(dotSize),
      r0 = r2 - 2,
      r1 = r2 + 2,
      r3 = 5,
      da = Math.PI / n,
      a0 = -Math.PI / 2,
      i = -1,
      path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
  while (++i < n) path.push(
      "A", r0, ",", r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",", r0 * Math.sin(a0),
      "L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0),
      "L", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
      "A", r1, ",", r1, " 0 0,1 ", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
      "L", r2 * Math.cos(a0 += da / 3), ",", r2 * Math.sin(a0),
      "L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0));
  return new Path2D(path.join(""));
}
</script>

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