Text Effects · How the words move
Text on a path环绕文字
- decorative
- ordered
- endless
The text is pinned to a curve instead of a line: a seal rotates, and a second line flows along an arc. Path decides position, so the type is inherently curved and inherently moving.
When to use it
For decoration that can keep turning: a round brand stamp, a seal on a loading screen, a small ambient mark in a corner. Do not set body copy on a path — curved text is read much more slowly — and do not have two rings turning opposite ways, because the eye cannot decide which to follow. One per page is plenty.
Parameters
SVG textPath · seal 26s per turn (linear) · arc startOffset 0→300 loop
Recipe
Text on a path → startoffset 0 → 300 loop @ 26s
One sentence for your AI
Build a ring of text: attach the string to a circular path with SVG textPath (radius 72 in a 200×200 viewBox) and rotate the whole ring once every 26 seconds at a constant rate; then attach a second textPath to a quadratic arc and let the type flow along it by advancing startOffset from 0 to 300 in a loop. Let the path decide position — do not rotate characters one by one, or the spacing will bunch up where the curve is tight. Set the text in uppercase with 0.1em letter-spacing and give it the current accent colour.