Motion mask by steveharoz

index.html

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

<style>
body {
  background: gray;
  position: relative;
}
</style>

<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var width = 960,
    height = 500,
    columns = 50,
    rows = 26,
    dots = d3.range(columns * rows).map( d => Math.random() ),
    dotSize = 20;
    cycle = 300;

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

var dotGlyphs = svg.append("g")
  .attr("class", "mask")
  .selectAll('circle')
  .data(dots).enter()
  .append('circle')
    .attr("r", dotSize * 0.66)
    .attr("cx", (d,i) => dotSize * (i % columns))
    .attr("cy", (d,i) => dotSize * Math.floor(i / columns))
    .attr("fill", d => Math.random() > 0.5 ? "black" : "gray");

d3.timer(function() {
    dotGlyphs.attr("fill", d => (cycle*d + Date.now()%cycle) % cycle > cycle/2 ? "black" : "gray");
});

</script>