rain circles

<!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; }
    #vis { width: 100%; height: 400px; border:1px solid red }
  </style>
</head>

<body>
  	<div id="vis"></div>
  <script>
       var width = document.getElementById("vis").clientWidth;

var height = document.getElementById("vis").clientHeight;
    var svg = d3.select("#vis").append("svg")
      .attr("width", width)
      .attr("height", height)

var i;
    for (i = 1; i < 100; i ++) {
    	var circle = svg.append("circle")
      	.attr("r", 10 + Math.random() * 20)
      	.style("fill", "#9a0b16")
		    .style("opacity", 0.7);
       
    var move = function() {
     d3.select(this)
        .transition()
        .duration(10000 + 20000*Math.random())
        .attr("cy", height)
        .attr("cx", width*Math.random())
        .on('end',function(){
        	  d3.select(this).remove();
            
          	var replicant = svg.append("circle")
      					.attr("r", 10 + Math.random() * 20)
      					.style("fill", "#9a0b16")
								.style("opacity", 0.7)
                .transition()
                .delay(20*i)
                .duration(10)
                .attr("cy", 0)
                .attr("cx", width*Math.random())
                .on("end", move);
     			});
    }
    
	circle.transition()
		.delay(20*i)
		.duration(10)
		.attr("cy", 0)
		.attr("cx", width*Math.random())
		.on("end", move);
};

</script>
</body>

https://d3js.org/d3.v4.min.js