Skip to content
MOTION LAB / Experimental

SVG Icons

Learn more

First-class SVG path drawing with pathLength, pathOffset, per-property transitions, and one-shot triggers. Ideal for animated icon systems like @lumen/icons.

moveTrigger + pathLength
moveVariants + transition
movePathDraw + per-property
icon-bounce preset

Each icon uses real SVG path drawing. The stroke is measured with getTotalLength(), then WAAPI animates the generated dash values and commits the final visible state.

Controls Make it yours

700ms
100ms2000ms
Easingease-out
demo.htmlhtml
<button (click)="animated.set(!animated())">Animate / reset</button>
<svg viewBox="0 0 24 24" width="96" fill="none" stroke="currentColor">
<!-- Trigger (no reverse) -->
<path d="M20 6L9 17l-5-5"
  [moveTrigger]="animated()"
  [moveFrames]="{ pathLength: [0, 1], opacity: [0, 1] }"
  moveDuration="700ms" moveEasing="ease-out"
  moveResetState="clear" />

<!-- Variants with per-property transition -->
<path d="M20 6L9 17l-5-5"
  [moveVariants]="{
    normal: { pathLength: 1, opacity: 1 },
    draw: {
      pathLength: [0, 1],
      opacity: [0, 1],
      transition: { duration: 700, opacity: { duration: 200, delay: 100 } }
    }
  }"
  [moveVariant]="animated() ? 'draw' : 'normal'" />

<!-- Helper function -->
<path d="M20 6L9 17l-5-5"
  [moveTarget]="animated()"
  [moveFrames]="movePathDraw({ opacity: [0, 0.72, 1] })"
  moveDuration="700ms" moveEasing="ease-out" />
</svg>