spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/text-fx/text-marquee-path.html7  Desc   : Infinite marquee flowing along a curved textPath8  ============================================================9-->10<!--svgarden11title: Marquee on a path12slug: text-marquee-path13category: text-fx14tags: [text, marquee, textPath, smil]15difficulty: intermediate16techniques: [textPath, SMIL-startOffset, monospace-periodicity, seamless-loop-math]17how_it_works: >18  The marquee is one long string — a short phrase repeated eight times — glued19  to a curve with <textPath>, and a SMIL <animate> slides startOffset backward20  forever. The seamless-loop trick is arithmetic: in a monospace font every21  repetition has identical width, so shifting by exactly one repetition22  (here ~25% of the path) lands on a frame indistinguishable from the start.23  Glyphs that fall before the path's start or past its end are simply not24  rendered, which is what makes letters appear at one end of the curve and25  vanish at the other with no clipping mask needed. Tune font-size and the26  to="-25%" together if you change the phrase.27customizable:28  - { var: "--sg-color", label: "Color", type: color, default: "#7F77DD" }29  - { var: "--sg-size",  label: "Width", type: range, min: 200, max: 520, default: 380, unit: px }30created: 2026-08-1031-->32<div class="sg-text-marquee-path" style="--sg-color:#7F77DD; --sg-size:380px;">33  <svg viewBox="0 0 400 100" aria-hidden="true" focusable="false">34    <defs>35      <path id="sg-text-marquee-path-rail" d="M6 62 C 105 18, 295 98, 394 50" />36    </defs>37    <use href="#sg-text-marquee-path-rail" class="sg-text-marquee-path-guide" />38    <text class="sg-text-marquee-path-txt">39      <textPath href="#sg-text-marquee-path-rail" startOffset="0%">40        svgarden ✦ svgarden ✦ svgarden ✦ svgarden ✦ svgarden ✦ svgarden ✦ svgarden ✦ svgarden ✦41        <animate attributeName="startOffset" from="0%" to="-25%" dur="5s" repeatCount="indefinite" />42      </textPath>43    </text>44  </svg>45</div>46<style>47  .sg-text-marquee-path {48    width: var(--sg-size);49  }50  .sg-text-marquee-path svg {51    display: block;52    width: 100%;53  }54  .sg-text-marquee-path-guide {55    fill: none;56    stroke: rgba(128, 128, 128, 0.3);57    stroke-width: 1;58    stroke-dasharray: 3 5;59  }60  .sg-text-marquee-path-txt {61    font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;62    font-size: 15px;63    font-weight: 600;64    fill: var(--sg-color);65  }66</style>67