Text on an Arc - Animate from Arc to an Arc

This is an example from my blog on Placing Texts on Arcs with D3.js that shows that a transition between similar paths (two arcs in this case) can be accomplished by the standard .transition().duration()

Another version shows how to transition between more complex paths

Other examples of text along a path from the same blog

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Text on simple Arc</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	
	<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
	
	<style>
		body {
			font-family: 'Pacifico', sans-serif;
			fill: #333333;
			font-size: 30px;
			text-align: center;
		}
	</style>
  </head>
  
  <body>

//Create an SVG text element and append a textPath element
		var textArc = svg.append("text")
			.style("text-anchor","middle")
		  .append("textPath")				//append a textPath to the text element
			.attr("xlink:href", "#wavy") 	//place the ID of the path here
			.attr("startOffset", "50%")		//place the text halfway on the arc
			.text("Yay, my text is moving back & forth");
		
		//Transition to an arc starting at location [75,300], ending at [325,300] with a radius of 125 (circle)
		//svg.selectAll("path")
		//	.transition().duration(2000).delay(2000)
		//	.attr("d", "M75,300 A125,125 0 0,1 325,300");

function repeat() {
			  path
			  .transition().duration(2000)
			  //Transition to an arc starting at location [75,300], ending at [325,300] with a radius of 125 (circle)
			  .attr("d", "M50,300 A150,150 0 0,1 350,300")
			  .transition().duration(2000)
			  //Transition back to original arc
			  .attr("d", "M0,300 A200,200 0 0,1 400,300")
			  .each("end", repeat);
		}//repeat
		
		//Repeatedly change the arcs back and forth
		repeat();
	
	</script>
	
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js