Voronoi

HTML

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

CSS

circle {
  fill: #f00;
  pointer-events: none;
}

JavaScript

var width = 200,
    height = width,
    radius = width/2-20,
    center = [width/2,width/2];

var points = d3.range(1000).map(function(d) {
  let a = Math.random() * 2 * Math.PI
  let r = radius * Math.sqrt(Math.random())
  let x = r * Math.cos(a)
  let y = r * Math.sin(a)
  return [x+center[0],y+center[1]]
});


  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
  
  var circles = svg.selectAll("circle")
      .data(points)
      .enter().append("circle")
;
  
  function update(){
    circles
    	.attr("transform", (d) => "translate(" + d + ")" )
      .attr("r", 2);
  }
  update();

function restrictToCircle(point) {
    var dist = distance(point, center);
    if (dist > radius) {
        point[0] = center[0]+ radius*(point[0]-center[0])/dist;
        point[1] = center[1]+ radius*(point[1]-center[1])/dist   
    }
    return point;
}

function distance(p1, p2) {
    return Math.sqrt(Math.pow(p1[0] - p2[1], 2) + Math.pow(p1[1] - p2[1], 2));
}

var iterations = 100;

var id = setInterval(()=>{
  points = d3.geom.voronoi()
  		.size([width,height])(points)
      .map(d3.polygonCentroid)
      .map(restrictToCircle);

  circles.data(points);
  update();
  if(iterations-- < 0) clearInterval(id);
}, 1);