Firefox for Web DevelopersMar 2
CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…
Show threadFirefox for Web Developers

The full docs on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape/shape

And a handy tool to convert SVG paths https://css-generators.com/svg-to-css/

shape() - CSS | MDN

The shape() CSS function is used to define a shape for the clip-path and offset-path properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The shape() function is a member of the <basic-shape> data type.

MDN Web Docs
Mar 2 at 3:06pmBuffer
Show threadFirefox for Web DevelopersMar 2

Here's the heart demo https://random-stuff.jakearchibald.com/heart-css-shape/

Note that the :hover applies to a wrapper, otherwise the clipped area is used for hit-testing - an old gotcha reminiscent of the Flash days.

Heart CSS shape

Show threadFirefox for Web DevelopersMar 3
Ohh this SVG path to CSS shape() convertor is better, as it lets you control the viewbox https://path-to-shape.netlify.app/
Path to CSS Shape

Convert SVG path data to CSS shape() function.