index.html
<!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>