Stroke Fill
SVG text animates from stroke to fill with smooth transition.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| text | string | Elegance | Text to animate |
| duration | number | 3 | Total animation duration in seconds |
When to Use
Excellent for luxury brand logos, cinematic intros, and high-impact reveals where text starts as an outline and fills solid.
Best Practices
Use short, single-word or two-word phrases. Larger font sizes make the stroke animation more legible.
Why This Component Matters
SVG stroke animations are a classic mark of quality UI — they create anticipation and add narrative to your content reveal.
FAQ
QDoes it work with any font?
Yes, any web font works as the SVG paths are generated from the rendered text.
QCan I trigger the fill on hover?
The current implementation is time-based; hover triggering requires a small state change.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.