JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<svg width="500px" height="500px" viewBox="0 0 1000 1000"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
 
	<title>Animation of Text on a Path</title> 
	<desc>
	startOffset of textPath is changed from 0 to 100% in 10s with repetition.
	</desc> 

<defs>
<path id="p1" d="M 100,500 Q 200,200 500,100 T900,500 500,900 100,500" />
</defs>	
	
<use xlink:href="#p1" stroke="blue" stroke-width="4" fill="none" />

<text id="text1" font-family="monospace" font-size="100" fill="red" stroke="cyan" stroke-width="1">
    <textPath id="top1" xlink:href="#p1">
      Animation of Text on a Path
    </textPath>
  </text>



<animate xlink:href="#top1"
	attributeName="startOffset" 
	attributeType="XML"
        to="100%"
	dur="10s"
	repeatDur="indefinite" />


</svg>