demo · v149

Animated wrap path

CSS transition can interpolate shape-outside: path() values — when both the old and new paths have the same number and type of commands, the browser morphs between them smoothly. The text reflows in real time as the shape changes, all in CSS with no JavaScript layout manipulation.

Select any two shapes to see the float morph and the text reflow during the CSS transition. Hit Auto-cycle to step through all five shapes with 2-second pauses. Both clip-path and shape-outside transition in sync so the visible shape always matches the wrap contour.

Shape:

Float side:

CSS path() values in shape-outside can be transitioned just like clip-path. Both properties accept the same path syntax and interpolate between shapes when the command count and types match. As the shape morphs, the browser re-runs float layout in real time — the text adjusts its line boxes without any JavaScript touching the layout.

This opens up interaction patterns that were previously impossible: hover states that smoothly reshape the float, scroll-driven animations that morph the wrap contour, and responsive shapes that scale with the container. The only constraint is that the old and new paths must share the same sequence of SVG commands — the coordinate values interpolate but the command list does not change.

Combined with the new shape() function from Chrome 149, you can write wrap shapes in CSS-native coordinates (using move, line, arc, and curve relative commands) and animate those too, without SVG path syntax. The shape-outside property has grown from four basic shapes to a full CSS drawing primitive.

.wrap-float { float: left; shape-outside: path('M 80,20 L 140,60 L 130,130 L 80,150 L 30,130 L 20,60 Z'); clip-path: path('M 80,20 L 140,60 L 130,130 L 80,150 L 30,130 L 20,60 Z'); transition: shape-outside 0.8s ease-in-out, clip-path 0.8s ease-in-out; }

/* CSS transition on shape-outside: path() */
.wrap-float {
  float: left;
  width: 160px; height: 160px;

  /* Both must use matching path commands for interpolation */
  shape-outside: path('M 80,20 L 140,60 ...Z');
  clip-path:     path('M 80,20 L 140,60 ...Z');

  /* Transition both in sync */
  transition: shape-outside 0.8s ease-in-out,
              clip-path     0.8s ease-in-out;
}

/* Switch shapes — text reflows during the transition */
.wrap-float.droplet {
  shape-outside: path('M 80,10 C 130,10 ... Z');
  clip-path:     path('M 80,10 C 130,10 ... Z');
}

/* Key constraint: old and new paths must have the same
   number and type of SVG commands to interpolate.
   Coordinates interpolate; command types do not. */

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

see also

implementation reference