SVG Blob Generator

SVG Blob Generator builds a shape out of a word. The seed is hashed into a small pseudo-random generator; that generator places your chosen number of points on a ring 46% of the canvas width out from the centre, shifts each point's angle by up to about a fifth of the gap to its neighbour, pulls each radius inward by an amount the edge variation controls, and threads a closed Catmull-Rom spline through the result. The spline is written out as cubic Bézier curves, one segment per point, coordinates rounded to two decimals — so what you get is one path in a square viewBox, with a gradient definition beside it only if you ask for one. No groups, no layers, and none of the editor metadata a drawing application leaves behind.

Because the shape comes from the seed rather than from a stored file, the same seed with the same settings produces byte-identical markup every time. That makes a blob something you can note down instead of store: the word, the point count, the variation, the canvas size and the colour are all short values. The download is named blob-<seed>-<points>.svg, with the seed lower-cased and anything that is not a letter or a digit turned into a hyphen, so part of the recipe travels with the asset. Change the point count or the variation and the same word gives a different shape, which is why the settings need recording alongside it.

The generating happens in this browser tab. Nothing is sent anywhere, the page keeps working with the network disconnected, and the result arrives both as text you can paste straight into markup and as a downloadable .svg file. The colour comes from the swatch, which is the browser's own colour picker, so the fill is always an opaque six-digit hex and is written into the file in upper case. The hex box sitting next to that swatch is display only: it shows the value the page opened with, and typing a colour into it changes nothing.

A few limits are worth reading before you start. Setting edge variation to 0% does not give you a circle, because the angles are still shifted by the seed: the points sit unevenly around the ring and the outline swells and narrows as it goes round. At the other end of the slider, 100% pulls a point in by four fifths of the radius at most, so the deepest notch still sits a fifth of the way out — but sixteen points at that setting reads as spikes rather than a blob, and three or four points read as a rounded triangle or quadrilateral. Every run makes one path with one fill: no stroke, no shadow, no background rectangle, no second blob, and no raster or CSS output. The gradient is fixed as two stops running corner to corner, and its definition always carries the id "g", so two gradient blobs pasted into one document end up sharing a single gradient until you rename one of them.

Runs on your device. Your file is processed directly in this browser.