spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/text/text-on-path.html7  Desc   : Text sliding along a curved path with animated startOffset8  ============================================================9-->10<!--svgarden11title: Text on a path12slug: text-on-path13category: text14tags: [text, textPath, smil, curve]15difficulty: intermediate16techniques: [textPath, startOffset, SMIL-animate, defs]17how_it_works: >18  A <textPath> glues the glyphs to any path you give it, and startOffset says19  how far along the curve the text begins. startOffset is an SVG attribute, not20  a CSS property, so CSS keyframes can't touch it — instead a tiny SMIL21  <animate> element sweeps it from −60% to 110%, sending the sentence surfing22  along the wave forever. SMIL ships inside the SVG itself: still zero23  JavaScript, still one self-contained file.24customizable:25  - { var: "--sg-color", label: "Text color", type: color, default: "#7F77DD" }26  - { var: "--sg-size",  label: "Width",      type: range, min: 160, max: 480, default: 300, unit: px }27created: 2026-08-1028-->29<div class="sg-text-on-path" style="--sg-color:#7F77DD; --sg-size:300px;">30  <svg viewBox="0 0 300 90" aria-hidden="true" focusable="false">31    <defs>32      <path id="sg-text-on-path-curve" d="M8 55 C 60 15, 110 85, 160 50 C 205 20, 250 70, 292 45" />33    </defs>34    <use href="#sg-text-on-path-curve" class="sg-text-on-path-rail" />35    <text class="sg-text-on-path-text">36      <textPath href="#sg-text-on-path-curve" startOffset="-60%">37        surfing along the bézier wave…38        <animate attributeName="startOffset" from="-60%" to="110%" dur="7s" repeatCount="indefinite" />39      </textPath>40    </text>41  </svg>42</div>43<style>44  .sg-text-on-path {45    width: var(--sg-size);46  }47  .sg-text-on-path svg {48    display: block;49    width: 100%;50  }51  .sg-text-on-path-rail {52    fill: none;53    stroke: rgba(128, 128, 128, 0.35);54    stroke-width: 1.5;55    stroke-dasharray: 4 5;56  }57  .sg-text-on-path-text {58    font-family: inherit;59    font-size: 15px;60    font-weight: 600;61    fill: var(--sg-color);62  }63</style>64