Text Path
SVG text riding a curved wave, arc, or circle path on a seamless, light loop.
textpathsvgcurveheadlineanimationtypographymarquee
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The string to tile along the path. |
curve | "wave" | "arc" | "circle" | "arc" | Built-in curve. Circle sizes the ring to the text; wave/arc use open path marquees. Ignored when path is set. |
path | string | - | Custom SVG path d. Wins over curve (open path marquee). |
viewBox | string | - | Custom SVG viewBox when using a custom path. |
duration | number | 14 | Seconds for one seamless loop. Lower = faster. |
direction | "forward" | "reverse" | "forward" | Travel / spin direction. |
separator | string | " · " | Separator between tiled copies. |
repeats | number | 3 | Tiles the string. Wave/arc: along the path. Circle: copies around the ring (radius grows to fit — no stacking). |
fontSize | number | 28 | Font size in CSS pixels. |
fontWeight | number | string | 500 | Font weight for the path text. |
letterSpacing | number | 0.05 | Letter spacing in em. |
fill | string | currentColor | Text fill. Omit to inherit currentColor. |
showPath | boolean | false | Draw the underlying path stroke. |
pathColor | string | theme | Path stroke color. Omit for soft theme line. |
pathWidth | number | 1 | Path stroke width in CSS pixels. |
paused | boolean | - | Force the loop paused. When omitted, auto-pauses off-screen or when the tab is hidden. |