Animation Test SVG

<!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 svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var glyphs = svg
  .selectAll('path')
  .data(dots).enter()
  .append('path')
    //.attr("r", dotSize * 0.66)
    //.attr("x", (d,i) => width * ((i/columns) % 1.0) )
    //.attr("cy", (d,i) => dotSize * Math.floor(i / columns))
    .attr("d", gear())
    .attr("fill", (d,i) => d3.hcl(360 * i/dotCount, 50, 75))
    .attr("stroke", 'black');

d3.timer(function() {
    glyphs.attr("transform", (d,i) => "translate(" + [
        width * ((i/columns) % 1.0),
        height * Math.abs(((d + (Date.now()/cycle)%1.0) % 1.0) * 2 - 1)
    ] + ")");
});

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 path.join("");
}

</script>

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