animate-text-path-backforth.html


 <!DOCTYPE html>
<html>
<style>
/*@import url(https://fonts.googleapis.com/css?family=Tangerine);*/
/*@import url(https://fonts.googleapis.com/css?family=Montserrat:700);*/
body{  margin:0;  width:100vw;   height:100vh;  background-color:#000000; position:relative;}
#background-video { position:absolute;  width: 100vw;  height: 100vh;   }
svg {  position:absolute;   width: 100vw;  height: 100vh;    }
</style>
<body>


<video id="background-video" autoplay>
  <source src="https://static.videezy.com/system/resources/previews/000/002/367/original/industrial-bridge.mp4" type="video/mp4"></video>

<svg
    width="1920"
   height="1080"
   viewBox="0 0 507.99999 285.75001"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
   sodipodi:docname="drawing-1.svg">

<g inkscape:label="Layer 1"     inkscape:groupmode="layer"      id="layer1"     transform="translate(0,-11.249983)">

    <path
       style="fill:none;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m -0.54636712,162.59367 107.63431712,1.6391 c 0,0 81.4087,-67.203152 159.53921,-65.56405 78.13048,1.6391 151.89004,66.65679 160.08556,80.31596 l 74.85229,-0.54636"
       id="fil"
       inkscape:connector-curvature="0" />
  </g>


<text font-size="16" font-family="Arial" fill='#FF0000'>


<textPath xlink:href="#fil">ANIMATING TEXT ALONG PATH
 <animate id="anim1" attributeName="startOffset" from="0%" to ="100%"
  begin="0s;anim2.end" dur="25s" repeatCount="1" />

<animate id="anim2" attributeName="startOffset" from="100%" to ="0%"

 begin="anim1.end"  dur="25s" repeatCount="1" />


</textPath>
</text>
</svg>

</body>
</html>