SVG CSS Variables | Svelte Motion

FIG-001/ SVG

a winding path, drawn in light.

Animate CSS variables directly on SVG paths. Scrub the visible segment or replay a draw-and-erase sequence.

animate() writes custom properties directly onto the SVG paths.
pathLength="1" normalizes the stroke so trim values run from zero to one.
animate(sequence) draws, erases, and restores the path with upstream sequencing.

api · animateinput · CSS variablesmode · live mode · live running source

light on a line SVG / CSS VARIABLES

draw a little. leave a little.

Start 0% End 65%

Scrub either end, or replay the complete draw-and-erase sequence.

category · svg

sheet · sheet 01 / 01

⟳ to re-run