A two-stage SVG pattern where a custom path outline draws first, then the matching fill reveals as a separate final phase. Demonstrated on simple production-icon shapes (heart, star, checkmark) so the technique reads at a glance.
Draw-to-fill / PathLength
A two-stage SVG pattern — a custom path outline draws first via stroke-dashoffset, then the matching fill reveals as a separate phase. Demonstrated on three production-icon shapes (heart, star, checkmark) so the technique reads at a glance without being buried in scene context.
Like / Favorite toggle
A heart contour draws first with stroke-dashoffset, then the matching gradient fill reveals — the universal like icon as a clean two-stage technique demo. Single closed cubic-Bezier path (the simplest case for the draw-to-fill mechanic).
Rating / Favorite toggle
A 5-point star outline draws first, then the gradient fill reveals — the universal rating / favorite icon as a clean technique demo. The polygon path is computed from outer / inner radii and 36° angle steps so the geometry is mathematically exact.
Symmetric crystal / 6-fold polygon
A 12-point dual-radius polygon (6-fold radial — outer vertices at 60° intervals, inner notches at the half-step angles) draws and fills as a single closed path. Demonstrates the technique on a more ornamental geometry while staying within the simple "one path → one fill" boundary.
Save / Collection toggle
A bookmark rectangle (with the classic V notch at the bottom) draws as a single closed path — straight-edge geometry contrasts with the curved heart and angular polygons. Demonstrates the technique on a path that mixes line segments and a sharp inner notch.
Power / Notification icon
A 7-vertex zigzag bolt draws as a single closed path with sharp angle changes. Demonstrates the technique on an asymmetric, high-contrast geometry that still shares the same outline-then-fill rhythm.
Verified / Confirmation toggle
An outer ring draws first, the inner checkmark draws inside, then both fill simultaneously with a sky-cyan gradient. Two paths sharing one cycle — demonstrates the technique on a multi-element composition while staying simple enough to read as a single icon.