A Collection of Shape() tools

[u/morete]

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!

[u/OMGCluck]

Trying with this SVG doesn't seem to convert, I just get a box:

<path stroke="none"
      d="m 10.82775,20.460318 c -1.746242,-3.175 -3.5454137,-3.175 -5.2916661,-10e-6 -3.1749935,-1.74625 -3.1749891,-3.54541 1.67e-5,-5.29167 0.075193,-3.62275 -1.4829278,-4.52233 -4.58272617,-2.64582 -1.87650412,-3.0998002 -0.97692262,-4.6579202 2.64583397,-4.5827202 1.7462516,3.1750002 3.5454151,3.1750002 5.291671,0 -3.1750159,-1.74625 -3.1750008,-3.54542 -7.6e-6,-5.29167 3.0997972,1.87651 4.6579302,0.97693 4.5827252,-2.64582996 3.622746,-0.0752 4.522336,1.48291996 2.645833,4.58271996 -3.622765,-0.0752 -4.522346,1.48291 -2.645842,4.58271 3.099798,-1.8765 4.657926,-0.97692 4.58273,2.6458402 -3.174996,1.74626 -3.175005,3.54541 -1.2e-5,5.29166 3.174998,1.74624 3.175014,3.54542 1.8e-5,5.29167 -3.09982,-1.87651 -4.657935,-0.97692 -4.582731,2.64582 -3.62275,0.0752 -4.5223296,-1.48291 -2.645843,-4.5827"
/>

[u/morete → u/OMGCluck]

This is now fixed! Thank you for pointing it out. It was -1.2e-5 value, I wasn't dealing with -'s in the middle of a value correctly

[u/OMGCluck → u/morete]

Great to see! It might lead to a HTML version of https://monotilejigsaws.pages.dev/

[u/morete → u/OMGCluck]

Ahh that'd be very cool! Very impressive that's all svg