ADVERT
Motion Path Generator
Define bezier control points, visualize the curve, and export production-ready CSS offset-path animations with configurable timing, iterations, and offset-rotate.
Live preview
See the CSS offset-path animation in action and pause to scrub the offset-distance.
●
CSS output
Copy the generated offset-path animation into your project.
/* Motion Path generated with ToolHop */
.motion-stage {
position: relative;
width: 420px;
height: 280px;
}
.motion-target {
position: absolute;
top: 0;
left: 0;
offset-path: path("M 12% 78% C 28% 18%, 62% 12%, 80% 72% C 88% 98%, 52% 88%, 40% 30%");
offset-rotate: auto;
animation: follow-motion 6s ease-in-out 0s infinite alternate both;
}
@keyframes follow-motion {
from {
offset-distance: 0%;
}
to {
offset-distance: 100%;
}
}
How to use this tool
- Adjust start point and bezier segment control handles.
- Configure stage size, timing, direction, fill mode, and offset-rotate.
- Preview motion and copy generated CSS `offset-path` animation output.
Path editing
- Supports multi-segment cubic bezier paths.
- Visual handle lines help align curvature and travel direction.
- Coordinate inputs allow fine control over each segment point.
Animation guidance
- Use `offset-rotate: auto` for natural heading alignment along curves.
- Tune duration and timing together to avoid abrupt path transitions.
- Pause and scrub `offset-distance` for frame-by-frame inspection.
FAQ
- Can I add and remove bezier segments?
- Yes. You can add new segments or remove existing ones while preserving the overall path.
- Does the output include keyframes?
- Yes. Generated CSS includes a `follow-motion` keyframes block and animation shorthand.
- Can I use custom `offset-rotate` values?
- Yes. Choose the custom option and provide a value like `auto 45deg`.
ADVERT
ADVERT