SVG Path-Following Animation
Animate shapes and icons along a custom curved path in SVG using CSS offset-path or SMIL's animateMotion element.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Using CSS offset-path for Motion Along a Curve
Modern CSS supports offset-path, which lets you reference an SVG path's d attribute (or a separate path() value) and animate offset-distance from 0% to 100% to move an element smoothly along that exact curve.
- offset-path: path('M...') uses any SVG path string as the motion track
- Animate offset-distance from 0% to 100% for full traversal
- offset-rotate controls whether the element rotates to follow the curve
SMIL animateMotion as an Alternative
For SVG-native animation without CSS, the animateMotion element inside an SVG shape can reference a mpath pointing to any path element, moving the shape along that track — useful for self-contained SVG files that need to animate independent of external CSS.
- animateMotion works inside SVG without external CSS
- mpath element references the path to follow by ID
- Self-contained — works even when the SVG is viewed standalone
Frequently Asked Questions
Should I use CSS offset-path or SMIL animateMotion?
Use CSS offset-path for web pages where you control styling externally; use SMIL animateMotion when the SVG needs to be self-animating even when opened as a standalone file, like in an email or static viewer.
Can the moving element rotate to match the path's direction?
Yes — set offset-rotate: auto in CSS, or rotate='auto' on the SMIL animateMotion element, and the element will automatically orient itself along the curve's direction.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG