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%;
}
}
ADVERT
ADVERT