title: Is it possible to infinitely repeat the animation of a SVG text path?
body: <p>I'm able to make text crawl around a closed SVG path but unable to make the text <em>continue</em> to crawl past its starting point. I'd like the text to crawl infinitely around the path..</p>
  <p><strong>Is this infinite animation possible using <code>&lt;textPath&gt;</code> element and <code>startOffset</code> attribute?</strong></p>
  <p>You can see what I'm trying to achieve in <a href="https://imgur.com/a/DjMKNL1" rel="nofollow noreferrer">this video</a>. I'm using JavaScript to increment the <code>startOffset</code> value. The text 'hides' once it hits the original starting point (<code>startOffset=&quot;0&quot;</code>).</p>
  <p>I'd like to use an SVG with real text (as opposed to a sequence or film) as the shape will (eventually) dynamically change depending on the viewer's viewport size.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const textPath = document.querySelector("#text-path");
  
  let increment = 0;
  
  window.setInterval(function () {
    increment += 1;
    textPath.setAttribute("startOffset", + increment);
  }, 1);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@900&amp;display=swap');
  
  body {
    margin: 5rem;
    font-family: 'Work Sans', sans-serif;
  }
  
  text {
    font-size: 30px;
    text-transform: uppercase;
  }
  
  svg {
    /* Needed to show text that goes beyond viewBox */
    overflow: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="440" height="440" viewBox="0 0 440 440" fill="transparent" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;path d="M40 0.5H400C421.815 0.5 439.5 18.1848 439.5 40V400C439.5 421.815 421.815 439.5 400 439.5H40C18.1847 439.5 0.5 421.815 0.5 400V40C0.5 18.1847 18.1848 0.5 40 0.5Z" id="number-one" stroke="transparent" /&gt;
    &lt;text width="100%" fill="black" &gt;
        &lt;textPath alignment-baseline="top" xlink:href="#number-one" id="text-path" startOffset="0"&gt;Number one. Number one. Number one. Number one. Number one. Number one. Number one. Number one. Number one.&lt;/textPath&gt;
    &lt;/text&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>