SVG — Animation Studio

Three ways SVG moves: the line-drawing trick with stroke-dashoffset, native SMIL tags, and motion along a path. Scrub, replay, and read the generated code.

1 · line-drawing with stroke-dashoffset

Make the dash as long as the whole path (pathLength), then animate stroke-dashoffset from full length → 0. The line appears to draw itself. Scrub it manually below.

dashoffset 100%

The whole trick

path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len); /* hidden */
  animation: draw 2s ease forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; } /* drawn */
}

Setting pathLength="100" normalizes the path length to 100, so dash math is just percentages — no measuring the real geometry.

2 · SMIL — animation that lives in the markup

<animate> tweens an attribute; <animateTransform> tweens a transform. No CSS, no JS — it runs from inside the SVG.

Inline SMIL

<rect …>
  <animateTransform
    attributeName="transform"
    type="rotate"
    from="0 100 70" to="360 100 70"
    dur="4s" repeatCount="indefinite"/>
</rect>

SMIL is convenient for self-contained animated icons, but CSS/WAAPI is the modern default for app UI — it composites better and pairs with media queries.

3 · motion along a path

<animateMotion> moves an element along a path's geometry — orbit, conveyor, comet trail. Toggle it.

Inline motion

<circle r="7">
  <animateMotion dur="3s"
    repeatCount="indefinite"
    rotate="auto">
    <mpath href="#track"/>
  </animateMotion>
</circle>

rotate="auto" turns the element to face its direction of travel — drop it for a dot, keep it for an arrow or rocket.