We’ve been trying to make the point around here that the new shape() in CSS is awesome. It’s the powerful <path> in SVG ported to CSS so it can use actual units. It’s probably how path() should have ported to begin with, but c’est la vie.
I’ll make the point in this demo. Resize those containers and see how the clip-path responds (path() cannot be fluid, shape() can).
Are SVG <path>s 1-to-1 convertible to shape(), though? Apparently they are! (!!). Two people have already built converters and from what I’ve tested they work great.
- https://css-generators.com/svg-to-css/ Temani Afif
- https://path-to-shape.netlify.app/ Matthew Morete
