Support offset-path: shape()

concepts

1. offset-path: shape()

   offset-path accepts the shape() function — declarative motion paths without resorting to SVG <path>. Composes with the rest of offset-* for keyframe-driven movement.

2. Shape Editor

   Drag four handles, watch the shape() string update live, copy-paste straight into a stylesheet. The mover follows the new path immediately.

3. Shape runner

4. Shape Animation Gallery

   Four simultaneous animations — wave, zigzag, oval loop, figure-eight — each following a different offset-path shape. Adjust global speed with a slider, pause and resume all tracks, and see the new CSS shape() function syntax alongside equivalent path() strings.

   Run three elements along a CSS shape() path with sliders for duration, scale, fill-mode, and offset-rotate. Presets: figure-eight, racetrack, heart, sine wave. Generated CSS shown live.

why it shipped

Support offset-path: shape(), to allow using responsive shapes to set the animation path.

references

• ChromeStatus entry
• Spec