Firefox for Web Developers @webdevs.firefox.com · Mar 2

CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…

150 likes 8 replies

?

Replies

0mn1core · Mar 3

Never saw that path was announced. What's the benefit of using CSS for shapes over in-lining SVG's and styling those? Is there a good article on pros and cons?

Artwo · Mar 2

Oh nice! My pretty button’s finally gonna display properly!

Script Raccoon · Mar 2

Amazing! This will be a lot of fun to experiment with.

Alex Kempton · Mar 2

These little overviews are really useful, thanks ❤️

Molotov Cockatiel Games (Bill) · Mar 2

You can use CSS measurements, calc(), and custom properties with path as well. Only issue I’ve had with path is that it also clips filters like drop-shadow. I understand why that is, but wish there was a toggle to specify if you want filters clipped or not so you didn’t have to add extra elements.

Firefox for Web Developers · Mar 2

The full docs on MDN developer.mozilla.org/en-US/docs/W... And a handy tool to convert SVG paths css-generators.com/svg-to-css/

MegaSlippers · Mar 2

That's rad

Altin Selimi · Mar 3

How did you get that spring looking animation, it’s not just css animation is it?