The CSS `shape()` function

Summary: shape() allows responsive custom shapes in CSS properties that accept a shape, currently limited to clip-path. It lets the author define a series of commands, equivalent to the commands in path(), but where the commands accept responsive units (e.g. % or vw), as well as any CSS values such as custom properties or rather than pixel-values.

Intent: https://groups.google.com/a/chromium.org/g/blink-dev/c/AliA6N9kaxo/m/YIlLj-0iAgAJ

Intent: Intent to implement and ship: Support offset-path: shape()

Spec: https://drafts.csswg.org/css-shapes-2/#shape-function

Other Resources:

=== This is a demo of CSS shape() function for clip-path. shape() counts for only clip-path currently, but other properties will also take advantage of shape() in the future spec. ===

// Originally Non-responsive SVG clip-path with path() function

// Advanced Responsive SVG clip-path with shape() function