How would I make a looping text marquee that is clipped to a path?

December 12, 2023

i’m still quite inexperienced with coding in general, but what I’m trying to do is to make an infinite marquee of text that is clipped to an svg path

I tried looking around and having a go. But I can’t seem to get the text to appear to see if my loop is even working

This is where i’m currently at.

<svg width="500" height="600" xmlns="http://www.w3.org/2000/svg">

  <path id="textPathCurve" d="M1.02632 392.868L1.02612 207.995C1.02612 115.501 73.223 0.986328 209.439 0.986328C345.655 0.986328 422.088 119.564 422.088 207.995L419.299 390.079C419.299 473.617 346.07 590.261 212.692 590.261C66.9114 590.261 1.02632 460.671 1.02632 392.868Z" fill="none" />

  <text font-family="Arial" font-size="18" fill="black">
    <textPath href="#textPathCurve" startOffset="100%">
      JOIN THE MOVEMENT > JOIN THE MOVEMENT > JOIN THE MOVEMENT >
    </textPath>
  </text>

  <style>
    @keyframes moveText {
      to {
        startOffset: -100%;
      }
    }

    textPath {
      animation: moveText 5s linear infinite;
    }
  </style>
</svg>

my SVG is showing, however no text is appearing at all to see if the loop is working.

any help would be appreciated

>Solution :

The text is partially hidden because its outside the viewbox of the SVG so you need to adjust that.

Secondly, startOffset is not a CSS property and so cannot be animated with keyframe animation.

You need to place the animation inside the textpath like so.

   <textPath href="#textPathCurve" startOffset="0%">
      JOIN THE MOVEMENT > JOIN THE MOVEMENT > JOIN THE MOVEMENT >
       <animate attributeName="startOffset" from="100%" to="-100%" begin="0s" dur="10s" repeatCount="indefinite"></animate>
    </textPath>

svg {
  height: 90vh;
}

<svg viewbox="-50 -50 550 650" xmlns="http://www.w3.org/2000/svg">

  <path id="textPathCurve" d="M1.02632 392.868L1.02612 207.995C1.02612 115.501 73.223 0.986328 209.439 0.986328C345.655 0.986328 422.088 119.564 422.088 207.995L419.299 390.079C419.299 473.617 346.07 590.261 212.692 590.261C66.9114 590.261 1.02632 460.671 1.02632 392.868Z" fill="none" />

  <text font-family="Arial" font-size="18" fill="black">
    <textPath href="#textPathCurve" startOffset="0%">
      JOIN THE MOVEMENT > JOIN THE MOVEMENT > JOIN THE MOVEMENT >
       <animate attributeName="startOffset" from="100%" to="-100%" begin="0s" dur="10s" repeatCount="indefinite"></animate>
    </textPath>
  </text>
</svg>