Design Atlas
한국어
↝ Motion

Path-follow text

패스 팔로우 텍스트

Text set along an SVG curve instead of a straight baseline, then moving continuously along that curve — common on circular logo badges and curved headlines.

Also known as: Text on a pathCircular texttextPath animation
···
html
<svg class="ptsvg" viewBox="0 0 200 200">
  <path id="circ" d="M100,20 A80,80 0 1,1 99.9,20" fill="none"/>
  <text font-size="12" font-weight="700" fill="var(--fg)" letter-spacing="2">
    <textPath id="tp" href="#circ" startOffset="0%">✦ DESIGN ATLAS ✦ MOTION ✦ DESIGN ATLAS ✦ MOTION </textPath>
  </text>
  <circle cx="100" cy="100" r="34" fill="var(--accent)"/>
</svg>
css
.ptsvg{width:min(76%,260px);aspect-ratio:1}
js
const tp = document.getElementById('tp');
let off = 0;
function loop() {
  off = (off + 0.05) % 100;
  tp.setAttribute('startOffset', off + '%');
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Put an SVG <textPath> inside a <text> element and its href reference to a <path> bends that text's baseline to match the path's shape — no need to rotate and place each character by hand; the browser computes letter spacing along the curve automatically. The moving effect comes from just continuously incrementing textPath's startOffset attribute from 0% upward — the whole line of text glides along the path.

If the path is a closed shape (a circle), startOffset wrapping past 100% back to 0% loops seamlessly. That's why circular badges repeat the text past its own length ("this product is organic ✦ this product is organic ✦ …") — so the loop shows no gap as it cycles.

Where motion path is "one element traveling along a path," this is "letters becoming the shape of the path itself" as they move — the same curve reads very differently either way. On a sharply curved path, letter spacing can visibly stretch or overlap, so this works best on gentle curves — circles, soft waves.

When to use

Use it for circular logo badges, stamp-like text, and gently curved headlines. Avoid it on sharply curved paths or long body text — readability suffers.