SVG Blob & Wave Generator

Each shape is a handful of points joined by a smooth spline, and the randomness that places those points comes from a seed rather than the clock. That is the detail that makes the tool useful the second time: the seed travels in the share link, so the blob a designer approved is the blob the developer gets, and Shuffle is a search through seeds rather than a lottery.

A blob is a circle that has been pushed in at a few points and then smoothed. The tool places between three and sixteen points around a circle, pulls each one inward by a random amount you control with the randomness slider, and runs a Catmull-Rom spline through them, converted to the cubic Bézier commands SVG understands. Fewer points give a soft, pebble-like shape; more points with high randomness give something closer to a splash. The fill can be flat or a two-stop gradient at any angle.

Waves are built the same way along a line instead of around a circle: sample points across the width, offset them, join them smoothly, then close the path down to the chosen edge so it fills as an area. The sine style is regular and symmetrical; the organic style starts from a slow sine and adds seeded jitter, which is what makes it look drawn rather than plotted. Up to four layers stack behind one another, each lighter than the last, for the depth that section dividers usually want.

Nothing in the output depends on the clock. Every random choice comes from a small seeded generator, so a seed and a set of sliders always produce the same path. That is why the seed is a field you can type into and why Shuffle simply picks a new one: the shape you liked is recoverable, and the link you copy carries it.

Three exports cover where these shapes end up. Plain SVG for a file or an inline element; a React component, with the attributes already converted to JSX names, for a component library; and a CSS background declaration with the SVG inlined as an escaped data URI, for the case where the shape is decoration behind a section. A PNG download at double resolution is there for the tools that still cannot take an SVG.