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