SVG text effects
Four effects you cannot get from HTML text alone: real vector text with
animated gradient fills, stroked glyph tracing, motion along an arbitrary path, and
mask-based liquid fills. Three of the four are pure SMIL — they would animate even
inside an <img> tag.
Flowing gradient fill
SMIL animateTransform slides a repeating gradient by one
full period per loop. Blue at both ends of the ramp makes the seam invisible.
Trace, then fill
Glyphs are paths: stroke-dasharray draws their outlines.
No pathLength on <text>, so the dash is an estimate that
covers the longest glyph; the fill fades in when tracing ends.
Text along a path
<textPath> glues text to any path;
animating startOffset slides it along. Glyphs rotate to follow the
curve's tangent automatically.
Liquid wave fill
Two identical texts: an outline "glass" and a filled copy behind a
<mask>. The mask's wave scrolls sideways in a loop while its parent
group rises once and freezes — nested transforms compose.