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

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
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.

Show threadPeta  foppaMar 2
@firefoxwebdevs I wonder how cursed of a use case would it be to use the shape() function for icons
Show threadFirefox for Web DevelopersMar 2

@petafloppa could be fun for animation!

In Firefox and Chrome, you can use SVG, but override the path using the `d` property in CSS https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d - but unfortunately it doesn't work in Safari.

d - SVG | MDN

The d attribute defines a path to be drawn.

MDN Web Docs
Show threadArneBabMar 2

@petafloppa that’s also what I thought about ☺

Having icons that work everywhere without custom fonts or inlined SVG data URI could make stuff much nicer.
@firefoxwebdevs

Show threadArneBabMar 2
@firefoxwebdevs nice! Thank you for the info!