Animate Voronoi site to cell

Just stripping down and tweaking Bostock's example to animate between Voronoi sites and polygons by clipping the site circle to the polygon and blowing up the radius. Silly and simple but I do like that it illustrates what a Voronoi tessellation is! ’Cuz every circle hits the bound against a well-matched antagonist.

<!DOCTYPE html>
<meta charset="utf-8">
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var sites = d3.range(100)
    .map(function(d) { return [Math.random() * width, Math.random() * height]; });

var voronoi = d3.voronoi()
    .extent([[-1, -1], [width + 1, height + 1]]);

var polygon = svg.append("defs")
  .selectAll("clipPath")
  .data(voronoi.polygons(sites))
  .enter().append("clipPath")
    .attr("id", function(d,i) { return "clip" + i; })
    .append("path")
    .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; });

function getMaxLinkDistance(links) {
  return d3.max(links.map(function(d) {
    return Math.sqrt(
      Math.pow(d.target[0] - d.source[0],2) +
      Math.pow(d.target[1] - d.source[1],2)
    );
  }));
}

</script>

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