svg-animation

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.

.path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 1.4s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

Getting the length:

• JS (most reliable): const len = path.getTotalLength(); path.style.setProperty("--len", len);
• No-JS trick: set pathLength="1" on the <path>, then stroke-dasharray: 1; stroke-dashoffset: 1; and animate to 0. This normalizes any path to a 0–1 length so no measurement is needed.

Reverse (erase) by animating offset from 0 back to len. Stagger multiple paths with animation-delay. Direction of drawing follows the path's point order; reverse it in the editor or negate the offset sign if it draws "backwards".

Morphing one path into another

Paths interpolate point-by-point, so a naive morph requires both d attributes to have the same number and type of commands. Two robust approaches:

• GSAP MorphSVG (free as of GSAP 3.12) — handles mismatched point counts automatically and finds a good mapping:

gsap.registerPlugin(MorphSVGPlugin);
gsap.to("#start", { morphSVG: "#end", duration: 0.8, ease: "power2.inOut" });
// Convert any shape to a morph-able path:
MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon");