SVG Toys and Tools

I am working on the website for my German podcast Neu•Gierig right now and while playing around with masking, gradients in css and SVG, I came across a few things, that I’d like to list here. Especially to bookmark them for myself. But maybe you find them useful or fun to interact with as well.

GetWaves

A screenshot of the website getwaves.io showing the interface to make SVG wave shapes
Easy and fun to play with – getwaves.io

A little editor to create SVG shapes – or better – SVG waves. Choose, if you like a round wave, a more block-looking or zick zack shape, enter the preferred colour and opacity and how busy your shape should look like … done. You can then hit the button with the dice to get a new random shape based on your parameters and if you like one, simply download or copy the SVG code by hitting a button.

SVGPath Editor

Well, this actually is, what the title says: an editor to edit your SVG path in the browser. Load a shape, edit it and save/copy the SVG code again. Useful for a quick edit certainly.

Blobmaker

A screenshot of the website blobmaker.app showing the interface to make organic SVG blob shapes
Need an organic looking blob? Who doesn’t! – blobmaker.app

Also fun to play with and from the same people as the wave creator above: Blobmaker. In case you need an organic looking blob, you enter your colour of choice, choose how complex your shape should be, how round or wild you want to go and done. Download or copy the SVG code, add your brand name on top and there is your new logo … well kind of …


You have more of this stuff? Send them to me. Always fun to play with these and I am adding new ones below the above.