Components/SVG Motion Path4 / 25

SVG Motion Path

Code

<AnimeMotionPath path={trackRef} duration={5000} ease="linear" loop autoplay>
  <circle r={5} fill="accent" />
</AnimeMotionPath>

Move elements along an SVG motion path.

Live preview

Motion PathCar follows Suzuka track via AnimeMotionPath

Props

Name	Type	Default	Description
path	RefObject<SVGPathElement>	-	SVG path ref to follow
duration	number	1000	Duration in ms
ease	string	linear	Easing function

Morph between different SVG path shapes smoothly

Circle, diamond, star, and wipe clipPath reveal animations

Animate SVG path drawing with stroke-dashoffset

1	<AnimeMotionPath path={trackRef} duration={5000} ease="linear" loop autoplay>
2	<circle r={5} fill="accent" />
3	</AnimeMotionPath>