SVG Outline Draw
A free SVG text animation for React that draws its outline once.
Outline the future
Customise
Code
<TextSvgOutlineDraw>
Outline the future
</TextSvgOutlineDraw>SVG Outline Draw is a free text effect for Next.js and React that draws a responsive SVG outline once, along each glyph's own length, then settles into a semantic-token fill. Tailwind controls the surrounding layout while Motion animates only the stroke dash offset and the fill opacity, once, when the text scrolls into view, and leaves nothing of the draw behind once it is done.
It gives teams looking for an SVG text animation React can render safely a semantic heading, a decorative fixed-viewBox visual, and a complete server-rendered fallback. Reduced-motion and no-JavaScript visitors receive the final filled and outlined text immediately, while the visible SVG stays hidden from assistive technology.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/text-svg-outline-drawUsage
import { TextSvgOutlineDraw } from "@/components/text-svg-outline-draw";
export function Example() {
return (
<TextSvgOutlineDraw
as="h1"
direction="forward"
drawDuration={1.15}
fillDelay={0.6}
strokeWidth={3}
fontSize={112}
letterSpacing={0}
className="font-semibold"
>
Outline the future
</TextSvgOutlineDraw>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | Plain display text rendered once for assistive technology. |
| as | ElementType | "h2" | Semantic wrapper element. |
| direction | "forward" | "reverse" | "forward" | Which end of each glyph outline the stroke is drawn from: its start (forward) or its end (reverse). |
| drawDuration | number | 1.15 | Draw duration in seconds, clamped from 0.45 to 2.4. |
| fillDelay | number | 0.6 | Seconds before the fill begins, clamped from 0 to 0.8 and never later than the draw. The default shows the outline drawing for about half the draw before the fill lands. |
| strokeWidth | number | 3 | Outline width in SVG units, clamped from 0.5 to 4. The default stays visible beside the fill at phone widths. |
| fontSize | number | 112 | Visual font size in SVG units, clamped from 64 to 150. |
| letterSpacing | number | 0 | Visual letter spacing in SVG units, clamped from -2 to 10. |
| className | string | undefined | Additional classes merged onto the semantic wrapper. |
Customisation
Override --outline-draw-stroke for the animated outline and --outline-draw-fill for the settled fill. Both tokens retain semantic vanilla CSS fallbacks. Use direction, duration, delay, stroke width, font size, and letter spacing props to tune the actual effect without turning preview wording into a control:
:root {
--outline-draw-stroke: var(--primary);
--outline-draw-fill: var(--foreground);
}Frequently asked questions
- Is SVG Outline Draw free for commercial use?
- Yes. SVG Outline Draw is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is SVG Outline Draw accessible and reduced-motion safe?
- Yes. The semantic wrapper owns one visually hidden copy of the text, while the SVG and its text are decorative and hidden from assistive technology. With reduced motion nothing is animated, and the final fill and outline are visible immediately.
- How can I customise the outline drawing effect?
- Use direction, drawDuration, fillDelay, strokeWidth, fontSize, and letterSpacing to tune the motion and geometry. Set --outline-draw-stroke and --outline-draw-fill on the component or an ancestor to retheme it with semantic colours.