Arc Tween

An example use of clipPath.

<!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);

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

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