← Back to gallery
SVG

SVG Path Fill Reveal

A two-stage SVG pattern where a custom path outline draws first, then the matching fill reveals as a separate final phase.

Duration
3s
Resolution
1440×900
Format
SVG
path-filldraw-to-fillmask-revealstroke-dasharraypathLength

Draw-to-fill / PathLength

SVG Path Fill Reveal

A custom SVG path first draws its outline with normalized stroke dashes, then reveals the matching fill as a separate second phase.

organic leaf draw to fill - 2.6s cycle · 1.00 intensity

Outline first · fill second

Organic Leaf

An organic form draws its contour before the interior fill fades in.

The outline phase completes before the fill opacity and scale finish.

  • path-fill
  • stroke-dasharray
  • fill reveal

Geometric badge · soft fill

Badge Shape

A badge contour uses the same draw-to-fill timing with more geometric control points.

The fill never appears before enough of the contour is visible to define the shape.

  • badge
  • pathLength
  • two phase

Small icon · fast fill

Spark Form

A smaller icon form shortens the outline pass so the result feels responsive.

The draw phase and fill phase overlap slightly near the end, matching quick feedback timing.

  • icon
  • responsive
  • fill sync

Path fill inspector

Organic Leaf

Motion contract
The outline phase completes before the fill opacity and scale finish.
Accessibility
Reduced motion shows the final filled path with no draw phase.

The stroke and fill share the same path data, keeping the second phase visually aligned.

css
<path class="draw" d="M42 112 C55 55 104 32 142 68 C169 94 155 131 124 145 C88 161 52 145 42 112 Z" pathLength="1" />
<path class="fill" d="M42 112 C55 55 104 32 142 68 C169 94 155 131 124 145 C88 161 52 145 42 112 Z" />

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawPath 2.60s ease forwards;
}

.fill {
  animation: revealFill 2.60s ease forwards;
}