CSS Motion Path Generator
What offset-path does
Motion path moves an element along an arbitrary curve rather than a straight line between two points. You give it a path — usually the same SVG path data a drawing uses — and animate how far along that path the element sits.
Syntax
offset-path: path('<svg path data>'); offset-distance: <percentage>; offset-rotate: auto;| Part | What it controls |
|---|---|
| offset-path | The route. path() takes SVG path data; ray(), circle() and shapes like inset() are also accepted. |
| offset-distance | How far along the path the element sits, from 0% to 100%. Animating this is what produces the movement. |
| offset-rotate | auto turns the element to face its direction of travel. A fixed angle keeps it upright, and auto 90deg offsets the facing. |
| offset-anchor | Which point of the element rides the path. Defaults to the transform-origin, usually its centre. |
| coordinate space | path() coordinates are relative to the element's containing block, not to any SVG on the page. A path copied from an SVG often needs translating. |
| still composable | offset-* works alongside transform, so you can rotate or scale while travelling the path. |
Notes from practice
auto rotation sells the motion
Without offset-rotate: auto an element slides along the curve facing one way, which reads as a glitch. With it, a plane or arrow banks into the turn.
Coordinates are not the SVG's
The path runs in the element's own coordinate space. Copying the d attribute straight out of an SVG usually puts the motion somewhere unexpected until it is offset.
Animate offset-distance, nothing else
It is a single interpolated percentage, so it is cheap and smooth. Trying to recreate the same curve with keyframed translate values is both harder and jerkier.
CSS Motion Path Generator FAQ
How do I animate an element along a path in CSS?
Set offset-path to the path, then animate offset-distance from 0% to 100%: offset-path: path('M0,0 C50,100 150,0 200,100') with @keyframes move { to { offset-distance: 100% } }. No JavaScript is involved.
How do I make an element rotate to follow the path?
Set offset-rotate: auto. The element then turns to face its direction of travel, which is what makes an arrow, plane or pointer look like it is genuinely following the curve rather than sliding along it.
Why is my motion path in the wrong place?
path() coordinates are relative to the element's containing block, not to the SVG you copied them from. Either translate the path data, or position the animated element so that the path's origin lands where you want it.
What is the difference between offset-path and a transform animation?
A transform animation interpolates in a straight line between keyframes, so a curve has to be approximated with many steps. offset-path follows a real curve and needs only one animated value, which is simpler and smoother.
Can offset-path use shapes other than a path?
Yes. ray() sends the element out along an angle, and basic shapes such as circle() and inset() define closed routes, which is a quick way to orbit an element without writing path data.
Related generators
- Keyframe Animation — Pick a ready-made @keyframes set and tune timing, repeat, direction and fill mode.
- Transform 2D & 3D — Translate, rotate, scale and skew in 2D or 3D, with perspective and the newer individual transform properties.
- Scroll-driven Animation — Link an animation to scroll position with animation-timeline. Scroll the preview to see it run.
- Clip Path — Cut an element into polygons, circles, ellipses or rounded insets.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.