xxxxxxxxxx<html> <head> <meta charset='utf-8'> <style> * { box-sizing: border-box; } body, svg, canvas { margin: 0; padding: 0; } </style> </head> <body> <div id='container'></div> <!-- <script src='js/vendor/d3.v3.js'></script> --> <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script> let w = window.innerWidth, h = window.innerHeight let svg = d3.select('#container').append('svg') .attr({width: w, height: h}) setInterval(function () { makeCircle([Math.random()*w, Math.random()*h]) }, 250) function makeCircle (coords) { svg.append('circle') .attr({cx: coords[0], cy: coords[1], r: 0, fill: 'none', stroke: 'hsl(' + Math.random()*360 + ',100%,70%)', 'stroke-width': 1}) .style({opacity: 1}) .transition().duration(1500) .attr({r: 100}) .style({opacity: 0}) .each('end', function () { d3.select(this).remove() }) } </script> </body></html> https://d3js.org/d3.v3.min.js