모션 패스

Motion path

요소가 직선이 아니라 SVG로 그린 임의의 경로(곡선, 나선 등)를 따라 움직이는 CSS 기능. offset-path와 offset-distance로 만듭니다.

다른 이름: 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)}

offset-path에 path() 함수로 SVG 경로 데이터를 그대로 넣고, offset-distance를 0%에서 100%로 애니메이션하면 요소가 그 경로를 따라 이동합니다. offset-rotate: auto를 주면 요소가 경로의 진행 방향을 향해 자동으로 회전합니다.

로딩 스피너가 복잡한 궤적을 그리거나, 아이콘이 곡선을 따라 날아가는 연출, 스크롤텔링에서 캐릭터가 지도를 따라 이동하는 데 씁니다.

데모는 SVG의 animateMotion으로 같은 개념을 보여줍니다 — 점선 경로가 실제 이동 경로이고, 점이 그 위를 따라 돕니다.

언제 쓰나

직선 이동이면 transform으로 충분합니다. 경로 자체가 스토리텔링의 일부일 때만 motion-path를 씁니다.