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 svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var glyphs = svg
.selectAll('path')
.data(dots).enter()
.append('path')
.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>