Marquee on a path

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/text-fx/text-marquee-path.html
  Desc   : Infinite marquee flowing along a curved textPath
  ============================================================
-->
<div class="sg-text-marquee-path" style="--sg-color:#7F77DD; --sg-size:380px;">
  <svg viewBox="0 0 400 100" aria-hidden="true" focusable="false">
    <defs>
      <path id="sg-text-marquee-path-rail" d="M6 62 C 105 18, 295 98, 394 50" />
    </defs>
    <use href="#sg-text-marquee-path-rail" class="sg-text-marquee-path-guide" />
    <text class="sg-text-marquee-path-txt">
      <textPath href="#sg-text-marquee-path-rail" startOffset="0%">
        svgarden ✦ svgarden ✦ svgarden ✦ svgarden ✦ svgarden ✦ svgarden ✦ svgarden ✦ svgarden ✦
        <animate attributeName="startOffset" from="0%" to="-25%" dur="5s" repeatCount="indefinite" />
      </textPath>
    </text>
  </svg>
</div>
<style>
  .sg-text-marquee-path {
    width: var(--sg-size);
  }
  .sg-text-marquee-path svg {
    display: block;
    width: 100%;
  }
  .sg-text-marquee-path-guide {
    fill: none;
    stroke: rgba(128, 128, 128, 0.3);
    stroke-width: 1;
    stroke-dasharray: 3 5;
  }
  .sg-text-marquee-path-txt {
    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px;
    font-weight: 600;
    fill: var(--sg-color);
  }
</style>