D3 circles

d3-circles.markdown

D3 circles

A Pen by Nick on CodePen.

License.

index.html

<svg id="circles"/>

script.js

var svg = d3.select("#circles");

d3.interval(function () {
  var x = Math.random() * parseInt(svg.style('width'));
  var y = Math.random() * parseInt(svg.style('height'));
  //console.log("Spawning circle at " + x + "," + y);
  svg.append('circle')
    .attr('cx', x)
    .attr('cy', y)
    .attr('r', 0)
    .style("opacity", .2)
    .transition()
    .duration(10000)
    .style("opacity", 0)
    .attr('r', 500)
    .on("end", function() { this.remove() })
}, 1000);

scripts

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

style.css

html, body, svg {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

styles

<link href="https://d3js.org/d3.v4.min.js" rel="stylesheet" />