SVG Animation

Crisp, lightweight, infinitely scalable vector motion — ideal for icons, illustrations, logos, and data marks. SVG can be animated three ways: CSS (declarative, simple), SMIL (<animate> inside the SVG), and JS (GSAP/Web Animations, for control and morphing). Choose per task; the techniques below say which.

When to use

• Stroke "draw-on" of icons, illustrations, signatures, maps
• Shape/path morphing and animated icon state changes (menu ↔ close, play ↔ pause)
• Moving an element along a path (motion path)
• Animated gradients, filters (glow, displacement), and animated logos

Core techniques

Stroke draw-on (the staple)

Draw the dash array as long as the path, offset it fully (invisible), then animate the offset to 0.