Arc Tween by EE2dev

index.html

<!DOCTYPE html>
<head>
  <title>animated arc</title>
	<meta charset="utf-8">
	<script src="//d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <svg width="960" height="500"></svg>
  
	<script>
  var arc = d3.arc()
      .startAngle(0)
      .endAngle(Math.PI);

  var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height"),
      g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var clippath = g.append("clipPath")
    .attr('id', "clippy")
                  .append('rect')
                      .attr('width', 200)
                      .attr('height', 200);
  var nrWaves = Array(10).fill({});

  var foreground = g.append("g")
         .attr('clip-path', "url(#clippy)")
      .selectAll("path")
      .data(nrWaves)
      .enter()
      .append("path")
      .style("fill", "orange")
      .attr("d", arc);

	foreground.transition()
        .duration(4000)
        .ease(d3.easeLinear) 
        .delay((d,i) => i * 200)
        .attrTween("d", arcTween())
        .style("opacity", 0);

  function arcTween() {
    return function(d) {
      var interpolate = d3.interpolate(0, 300);
      return function(t) {
        d.innerRadius = interpolate(t);
        d.outerRadius = interpolate(t) + 3;
        return arc(d);
      };
    };
  }

  </script>
</body>
</html>