Motion path

모션 패스

A CSS feature that moves an element along an arbitrary path — a curve, a spiral, anything drawn as SVG — instead of a straight line, built with offset-path and offset-distance.

Also known as: offset-pathPath animation

···

html

<svg class="pathsvg" viewBox="0 0 200 100" preserveAspectRatio="xMidYMid meet">
  <path id="p" d="M10,85 C40,10 80,10 100,50 C120,90 160,90 190,20" fill="none" stroke-width="2" stroke-dasharray="4 5"/>
  <circle r="7">
    <animateMotion dur="3.6s" repeatCount="indefinite" rotate="auto">
      <mpath href="#p"/>
    </animateMotion>
  </circle>
</svg>

css

.pathsvg{position:absolute;inset:10%;width:80%;height:80%}
.pathsvg path{stroke:var(--line)}
.pathsvg circle{fill:var(--accent)}

Pass SVG path data straight into offset-path via the path() function, then animate offset-distance from 0% to 100% to move an element along it. Add offset-rotate: auto and the element automatically turns to face the direction it's travelling.

Used for loading indicators that trace an elaborate route, an icon flying along a curve, or a character moving along a map in a scrollytelling piece.

The demo shows the same idea with SVG's animateMotion — the dashed line is the actual path, and the dot travels along it.

When to use

For a straight move, transform is enough. Reach for motion-path only when the path itself is part of the story.