steveharoz/index.html

## 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>
	<!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.5Math.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>