SVG Text Animation — Typewriter, Stroke Draw, Fade-In & More
SVG <text> elements support the full CSS animation and SMIL toolbox — and because the text lives in the SVG coordinate system, you get pixel-perfect control over stroke draws, masked reveals, and per-character stagger that are impossible in plain HTML. Here are the five patterns worth knowing.
Why Animate Text as SVG?
HTML text animation is limited to opacity, transform, and clip-path. SVG text adds fill, stroke, stroke-dashoffset, and mask-based reveals — letting you animate the text outline itself as a drawn path.
SVG text also scales perfectly at any resolution and embeds custom fonts via @font-face, making it ideal for animated logos, hero headings, and loading screens.
Pattern 1: Stroke Draw-On Effect
The stroke draw-on effect outlines each letter and animates the stroke appearing as if it's being written. It relies on stroke-dasharray set to the total perimeter of the text paths and stroke-dashoffset animating from that value to zero.
Getting the exact path length
SVG <text> doesn't expose getTotalLength(). Convert text to paths in Figma or Inkscape (Text → Object to Path), then run el.getTotalLength() on the resulting <path> in DevTools.
Pattern 2: Fill Color Reveal
Animating the fill from transparent to a color creates a clean fade-in that stays sharp at any size. Combine it with a simultaneous stroke fade-out to transition from outlined text to solid.
Pattern 3: Typewriter Effect with SVG
The typewriter effect in SVG uses a clipPath that grows from left to right, revealing the text underneath. This is cleaner than HTML overflow: hidden because it works even when the text is rotated or placed on a path.
Using steps(n, end) instead of a smooth easing makes the reveal snap one character at a time — exactly the typewriter effect. Set n to the number of characters in the string.
Pattern 4: Per-Character Stagger with <tspan>
Wrapping each character in a <tspan> lets you animate them independently with a CSS animation-delay stagger.
Pattern 5: Animated Gradient Fill
SVG text can reference a <linearGradient> for its fill. Animating the gradient stop colors or the gradient offset creates a shimmering effect without JavaScript.
This uses SMIL <animate> inside the gradient — it works even when the SVG is served as an <img> tag.
Common Gotchas
SVG text doesn't support stroke-dasharray in all browsers
Chromium and Firefox support stroke-dashoffset animation on SVG <text>. Safari has historically been inconsistent. For maximum compatibility, convert text to <path> elements and animate those instead.
font-family fallback affects timing
Web font loading is async. If the font loads after the animation starts, the geometry changes mid-animation. Add font-display: block in @font-face and preload the font to avoid this.
transform-box: fill-box is required for per-character rotation
Without transform-box: fill-box, transform-origin is relative to the SVG root coordinate system, not each <tspan>. Always set it alongside any transform animation on SVG text elements.
Animate SVG Text Visually
Import your SVG, add text elements, set keyframes on the timeline, and export clean CSS or SMIL — no hand-coding required.
Open the Editor — it's free