D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jonsadka
Full window
Github gist
Dot wallpaper
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;background:black; } </style> </head> <body> <script> var width = 960; var height = 500; var svg = d3.select('body').append('svg') .attr('width', width) .attr('height', height); var squareSize = 40; var position = {x: 0, y:0}; var numDots = width * height / squareSize; var dotPositions = d3.range(numDots).reduce(function(dots){ dots.push({ x: position.x, y: position.y, key: `key${position.x}-${position.y}` }); position.x += squareSize; if (position.x >= width){ position.x = 0; position.y += squareSize; } return dots; }, []) svg.selectAll('.dot').data(dotPositions, function(d){ return d.key; }) .enter().append('circle') .attr('cx', function(d){ return d.x;}) .attr('cy', function(d){ return d.y;}) .attr('class', function(d){ return `dot ${d.key}`; }) .attr('fill', 'white') .attr('fill-opacity', function(){ return Math.random();}) .style('r', 2) setInterval(function(){ svg.selectAll('.dot') .transition().duration(800) .attr('fill-opacity', function(){ var shouldTransition = !!Math.round(Math.random()); if (shouldTransition) return Math.random(); return this.getAttribute('fill-opacity'); }); }, 800) </script> </body>
https://d3js.org/d3.v4.min.js