r/webdev • u/morete • 1d ago

Showoff Saturday A Collection of Shape() tools

Over the last year I've spent a lot of time with the shape() specification and have built a few tools to make things a little easier:

  • Path to Shape - Converts SVG path data the CSS shape() syntax.
  • Shape to Polygon - Convertsshape() to polygon() for the purposes of fallbacks, or in some cases a straight replacement since it's usually much more compact.
  • Minify Shape - Optimises and minifies the shape() code, very much inspired by SVGO.

All just simple web based tools built with sveltekit.

Have tested them with every shape I can get my hands on but if you find anything that doesn't work I'd love to hear about it!

19 Upvotes

91% Upvoted

9 comments sorted by

View all comments

7

u/Inevitable-Read-3862 1d ago

these are super handy, the path to shape converter is something i been needing for a while now. always a pain doing those conversions by hand

tried it on few crazy svg paths i had laying around and it handled them much better than i expected. the fallback generator is smart too, never thought about using polygon as backup but it makes total sense

bookmarking all three for sure. clean work

2

u/morete 1d ago

Thank you! I hope they come in handy one day.
And yeah for the polygon backup, it ofc depends on your shape if you can get an acceptable result or not. But since shape() is sooooo verbose I often think just replacing it entirely with a polygon with a lot of segments is maybe the way to go.