Support path() and shape() in shape-outside

concepts

1. path() Wrapping Demo

   Float an element with a shape-outside: path(…) value and watch text flow around a custom SVG path — curves, arcs, and compound shapes that were previously only possible with an inline <svg> element and clip-path.

2. shape() Function Demo

   Use the newer shape() CSS function syntax (relative commands, responsive units) to define text-wrapping contours. Compare path()'s absolute SVG syntax with shape()'s CSS-native relative coordinates.

3. Magazine Layout

   Editorial text wrapping around five shape presets — circle, arch, star, wave, diamond — using shape-outside: path(…) and polygon() on a floated element. Live CSS output pane shows the exact declaration for each shape.

4. Path Shape Builder

   Pick from five preset paths, adjust float size, side, and shape-margin, and watch text wrap in real time. Copy the generated CSS to use in your own project. Each preset also applies clip-path using the same path so the float's visible shape matches its wrap contour.

5. Combined Float + Clip

   Three-column comparison: old square-float-with-SVG-child approach, clip-path alone (float looks right but text wraps the box), and clip-path + shape-outside with the same path (text hugs the shape). Choose from four preset paths and see the difference immediately.

6. Animated Wrap Path

   CSS transition can interpolate shape-outside: path() values — when paths share the same command sequence, the browser morphs the wrap contour smoothly and text reflows in real time. Five shapes (hexagon, droplet, star, wave, arrow) transition with an ease-in-out curve; clip-path transitions in sync so the visible shape always matches the text-wrap boundary. Hit Auto-cycle to step through all shapes automatically.

why it shipped

shape-outside has always accepted polygon(), circle(), ellipse(), and inset() as its shape values, but these primitives could not express the kinds of curves that designers routinely use — a scalloped edge, a brand logo contour, or a wave. The workaround was to embed an SVG element, apply clip-path to it, and use that element as the float — a multi-element, cross-language hack. Chrome 149 closes the gap: path() accepts the exact same SVG path string syntax already used in d, clip-path: path(), and offset-path; while shape() provides a responsive CSS-native variant with support for percentage units and relative move commands. Text wrapping is now a one-property CSS declaration.

syntax

/* path() — SVG path string, absolute coordinates */
.float-left {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: path('M 0 0 C 50 0, 200 100, 200 200 L 0 200 Z');
}

/* shape() — CSS-native, supports percentages and relative commands */
.float-right {
  float: right;
  width: 200px;
  height: 200px;
  shape-outside: shape(from 0% 0%, curve to 100% 50% with 50% 0%, line to 0% 100%);
}

references

• ChromeStatus entry
• MDN — shape-outside
• CSS Shapes Level 1 spec