JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<svg width="1280" height="200px" viewBox="0 0 1280 200" xmlns="http://www.w3.org/2000/svg">
	    <style>
	        text { font-size: 16px }
	    </style>

	    <symbol id="s1">
	        <path id="p1" d="M-325,14.564 L-325,14.564 S-108.22500000000001,44.564 0,44.564 S216.77499999999998,14.564 325,14.564 S541.775,44.564 650,44.564 S866.775,14.564 975,14.564 S1191.775,44.564 1300,44.564 S1516.775,14.564 1625,14.564" />
	    </symbol>

	    <use href="#s1" stroke="silver" stroke-width="10" fill="none" />

	    <text dominant-baseline="middle">
	        <textPath href="#p1" startOffset="100%">
	            View my previous work
	        <animate
	        attributeName="startOffset" from="100%" to="-100%"
	        dur="20s" repeatCount="indefinite" />
	        </textPath>
	    </text>

	    <text dominant-baseline="middle">
	        <textPath href="#p1" startOffset="100%">
	            View my previous work
	        <animate
	        attributeName="startOffset" from="100%" to="-100%"
	        dur="20s" begin="5s" repeatCount="indefinite" />
	        </textPath>
	    </text>
	</svg>