demo · v137

offset-path: shape()

Animate an element along an inline shape() path — no SVG sidecar required. Pick a shape, scrub the duration, watch the mover trace it live.

probing CSS.supports("offset-path: shape(from 0% 0%)")…

the code

.mover {
  offset-path: shape(from 5% 50%, line to 30% 10%, line to 60% 90%, line to 95% 50%);
  animation: travel 4s linear infinite;
}
@keyframes travel { to { offset-distance: 100%; } }

see also