I was extremely excited when I first heard that clip-path: path() was coming to Firefox. Just imagine being able to easily code a breathing box like the one below with just one HTML element and very little CSS without needing SVG or a huge list of points inside the polygon function!
Chris was excited about the initial implementation, too.
How fun would this be:
I decided to give it a try. I went on CodePen, dropped a
Note that clip-path: path() only works in Firefox 63-70 with the layout.css.clip-path-path.enabled flag set to true in about:config and in Firefox 71+ without needing to enable any flag. (Source: MDN.)
These were the examples I found:
path(M0 200L0 110A110 90 0 0 1 240 100L 200 340z)
path(M.5 1C.5 1 0 .7 0 .3A.25 .25 1 1 1 .5 .3 .25 .25 1 1 1 1 .3C1 .7 .5 1 .5 1Z)
What are those coordinates? The sad answer is pixel values! Those are used because the path() function takes an SVG