Chapter 233: DrawSVGPlugin (Overview)

Core Idea

Progressively reveals or hides the stroke of an SVG shape (path, line, polyline, polygon, rect, ellipse) by animating stroke-dashoffset/stroke-dasharray under the hood, and can draw from the middle outward or any custom segment.

Key Concepts

drawSVG value is a two-part range (like "20% 80%") describing which portion of the stroke is currently visible, not the animation's start/end percentages.
A tween's drawSVG value describes the target end state (or the start state for a from() tween) — it does not itself animate between two percentages you specify.

Code Examples

gsap.registerPlugin(DrawSVGPlugin);

// draws all ".draw-me" elements from invisible to fully drawn
gsap.from(".draw-me", { duration: 1, drawSVG: 0 });

// draw outward from the middle to fill the whole path
gsap.fromTo("#path", { drawSVG: "50% 50%" }, { duration: 1, drawSVG: "0% 100%" });

What it demonstrates: the difference between a simple reveal (drawSVG: 0 → full) and drawing outward from a custom starting segment.

Connects To

DrawSVGPlugin.getLength(), getPosition(): helpers for reading a stroke's current length/position.
MorphSVG: a related SVG plugin, for morphing shapes rather than revealing strokes.