CSS & SVG wave and blob generator

Why these curves have no kinks in them

Most generators of this kind place Bézier control points by a rule of thumb — a third of the way to the next point, usually — and the result has a small kink at every sample point. You do not notice it on a thumbnail and you cannot miss it once the shape is three metres wide behind a hero image. This one derives each control point from the tangent of a Catmull-Rom spline, so the two curve segments meeting at a point compute the *same* direction from the same two neighbours. Smoothness is not a setting here, and not something checked for afterwards: it is a consequence of the arithmetic, and the test suite asserts it holds at every join across thousands of generated shapes.

The CSS you copy is the shape you saw

Two things usually break between a generator's preview and the CSS it hands you. The first is the hash in a hex colour: inside a data URI an unencoded `#` ends the URL, the browser reads the rest as a fragment, and the background silently never paints — no error, nothing in the network panel. Every colour here is percent-encoded before it reaches the stylesheet. The second only affects border-radius blobs: if the two radii meeting on one edge add up to more than 100%, the browser scales *every* corner down to compensate, so the shape it draws is flatter than the one you picked. The values this tool emits are generated inside that limit, so the browser leaves them alone.

Bytes, shown rather than hidden

A shape pasted into a stylesheet is weight on every page load, so the byte count sits under the output box and updates as you drag. Coordinates are rounded to two decimals — a hundredth of a pixel on a 1440-unit canvas, far below anything a screen can show — which typically removes a third or more of the path length for no visible change. If the number looks large, fewer points is almost always the fix: it is the one slider that changes the size significantly.

No account, no upload, no watermark

There is no server to send anything to. The generator is a few kilobytes of JavaScript that runs in this page, your settings are kept in this browser's local storage, and the shapes you make are yours with no attribution required. Once the page has loaded it works with no connection, which also means it works behind a corporate proxy that blocks half the internet.