D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
steveharoz
Full window
Github gist
Motion mask
<!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>
https://d3js.org/d3.v4.min.js