v137 · css · animation
Shape Animation Gallery
Four animated elements follow different offset-path shapes — wave, zigzag, oval, and figure-eight — using CSS path() and the new shape() function syntax. Control animation speed and pause/resume all tracks from the controls below.
Animations
offset-path: shape(…)
offset-path: path(…)
offset-path: path('M…C…') — wave
Wave
offset-path: path('M…L…') — zigzag
Zigzag
offset-path: path('M…A…') — oval
Oval loop
offset-path: path('M…C…') — figure-8
Figure-8
CSS — shape() syntax (Chrome 137+)
/* Old: path() — works but requires SVG d-string syntax */
.mover {
offset-path: path('M 0 60 C 40 10, 80 110, 120 60');
}
/* New: shape() — CSS native syntax, more readable, supports calc() */
.mover {
offset-path: shape(
from 0px 60px
curve to 120px 60px via 40px 10px 80px 110px
curve to 240px 60px via 160px 10px 200px 110px
);
}
shape() vs path(): Both work with
offset-path, but
shape() uses a CSS-native command syntax (not SVG). It can include
calc() expressions and CSS units, making it easier to write paths that
are relative to element sizes. Chrome 137 ships support for offset-path: shape()
allowing motion paths to be defined entirely in CSS without SVG.