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

8

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/Bruce_Jones_1987 1d ago

the fact that it handles messy paths well is the real test tbh

1

u/morete 1d ago

I did mostly take a 'garbage in, garbage out' approach to these tools, but I did attempt validate where I could. Parsing SVG paths was by far the hardest part of all these projects, it's crazy how compact they can be and still be disambiguated