Blob Generator
Generate a seeded SVG blob, wave or pattern and copy the exact markup — entirely on this device.
Drag a slider or change the seed to redraw.
The shape on screen is drawn from the same markup you copy; the copied file carries none of this page's CSS.
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<!-- blob-generator v1 -->
<path d="M 428.43,228.38 C 426.83,285.09 410.25,406.08 369.16,436.77 C 328.07,467.45 237.34,442.04 181.88,412.5 C 126.41,382.97 41.01,310.14 36.38,259.54 C 31.74,208.94 97.02,136.08 154.09,108.9 C 211.16,81.73 333.09,76.59 378.81,96.5 C 424.53,116.41 430.04,171.67 428.43,228.38 Z" fill="#3b82f6"/>
</svg>
425 · Blob · seed ithomia
The same seed always redraws the same shape.
Press ? for shortcuts
Do it offline:$ npx svgo blob.svg -o blob.min.svg
How to use it
- Pick a mode — blob, wave or pattern. A shape is already on screen, so nothing needs pasting first.
- Shape it: a blob takes 3 to 24 points, randomness and smoothing; a wave takes layers, amplitude, complexity and two mirror toggles; a pattern takes a motif, tile size, rotation and stroke width.
- Set the canvas — 32 to 4,096 units per side; square for a blob, wide and short for a divider.
- Type a seed or press Randomize. The seed is the shape's address: keep it and a later visit rebuilds the geometry.
- Choose one colour, two colours or no fill, then copy the SVG, download it, or share the settings as a link.
Draw an organic SVG blob, a section-divider wave or a tiling pattern from a seed you can read, retype and share. Every shape is a pure function of that seed and the sliders, so one setting redraws one path to the byte — no lucky refresh you can never find again. Copy the markup, download the file, or keep the seed. Generation runs in this tab.
How it works
The seed is hashed with FNV-1a 32-bit over its UTF-16 code units — offset basis 2,166,136,261, prime 16,777,619 — and that one 32-bit word starts a mulberry32 stream. Each mode spends that stream in a fixed order: two numbers per blob point (an angle nudge, then a radius factor), one phase per wave layer plus one per control point, two for a motif's offset inside its tile. No clock and no platform random source is read while drawing. An empty seed is legal.
Points become a path through a uniform Catmull-Rom spline converted to cubic segments. The tangent wanted at a point is half the vector between its neighbours, and a cubic leaves its start at three times the step to its first control point, so that control point sits one sixth of the neighbour vector away — a derivation, not a tuned constant. Smoothing scales both offsets; at zero the curve collapses onto the chord and line commands are emitted. Coordinates round half away from zero to two decimals, trailing zeros trimmed, which is why two runs of one seed agree character for character.
Examples
Blob — seed ithomia, 6 points, randomness 0.35<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<!-- blob-generator v1 -->
<path d="M 428.43,228.38 C 426.83,285.09 410.25,406.08 369.16,436.77 C 328.07,467.45 237.34,442.04 181.88,412.5 C 126.41,382.97 41.01,310.14 36.38,259.54 C 31.74,208.94 97.02,136.08 154.09,108.9 C 211.16,81.73 333.09,76.59 378.81,96.5 C 424.53,116.41 430.04,171.67 428.43,228.38 Z" fill="#3b82f6"/>
</svg>
The shape the page opens on: six points around a 512-unit square, a closed ring of cubic segments, and a version comment so a file found later can be traced back.
Wave — 3 layers over 1440 × 320, seed divider<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="320" viewBox="0 0 1440 320">
<!-- blob-generator v1 -->
<defs>
<linearGradient id="ith-g-f69p2e" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0" stop-color="#6366f1"/>
<stop offset="1" stop-color="#22d3ee"/>
</linearGradient>
</defs>
<path d="M 0,155.85 C 60,144.95 240,87.47 360,90.41 C 480,93.36 600,164.37 720,173.52 C 840,182.67 960,156.9 1080,145.32 C 1200,133.75 1380,110.96 1440,104.08 L 1440,320 L 0,320 Z" fill="url(#ith-g-f69p2e)"/>
<path d="M 0,243.15 C 60,225.44 240,159.67 360,136.86 C 480,114.05 600,104.92 720,106.31 C 840,107.7 960,123.11 1080,145.21 C 1200,167.32 1380,223.31 1440,238.93 L 1440,320 L 0,320 Z" fill="url(#ith-g-f69p2e)" fill-opacity="0.7"/>
<path d="M 0,167.87 C 60,188.45 240,291.04 360,291.31 C 480,291.59 600,185.75 720,169.51 C 840,153.27 960,187.14 1080,193.86 C 1200,200.59 1380,207.18 1440,209.85 L 1440,320 L 0,320 Z" fill="url(#ith-g-f69p2e)" fill-opacity="0.4"/>
</svg>
A divider band: three crests closed through the two bottom corners so each fills below its line. Opacity steps 1, 0.7, 0.4, and the two-colour fill is one def referenced three times.
Pattern — dots on a 32-unit tile, seed grid<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<!-- blob-generator v1 -->
<defs>
<pattern id="ith-p-1cpapw1" patternUnits="userSpaceOnUse" width="32" height="32">
<path d="M 9.32,14.57 A 5.76,5.76 0 1,0 20.84,14.57 A 5.76,5.76 0 1,0 9.32,14.57 Z" fill="#0f172a"/>
</pattern>
</defs>
<path d="M 0,0 L 512,0 L 512,512 L 0,512 Z" fill="url(#ith-p-1cpapw1)"/>
</svg>
One tile definition and one covering path, so the file is the same size at 512 units or 4,096 — repeating is the renderer's job. The dot's off-centre offset is the seed's work.
Blob — same seed and points, smoothing 0<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<!-- blob-generator v1 -->
<path d="M 428.43,228.38 L 369.16,436.77 L 181.88,412.5 L 36.38,259.54 L 154.09,108.9 L 378.81,96.5 L 428.43,228.38 Z" fill="#3b82f6"/>
</svg>
Zero smoothing keeps the identical six corners and joins them with line commands instead of curves: a faceted look, a shorter file. A note names the switch.
Every example on this page is executed against the same engine that powers the tool, on every build.
Gotchas worth knowing
A tall wave is clipped, never rescaled
Push amplitude past the top of the canvas and the crest leaves the visible box. Coordinates stay as computed, not shrunk to fit; lower the amplitude or raise the height.
A tile that does not divide the canvas is cut at the edge
Tiles start at the origin and repeat, so a 30-unit tile on a 512-unit canvas ends in a partial row and column. A note says so; pick a tile that divides the side for whole ones.
Randomness at zero is a plain circle
With no jitter a blob's points land on an even ring: a circle. The random numbers are still drawn and discarded, so raising randomness returns the shape you had. A wave has no randomness control; only amplitude 0 flattens its crest.
Seeds are compared code unit by code unit
An emoji, accented letter or right-to-left seed is hashed exactly as stored, with no Unicode normalization, so two spellings that look identical can address two shapes.
Common errors
Seed is 65 characters, past the limit of 64 characters. Shorten the seed — it only picks the shape, not its size. To shrink an exported file instead, run: npx svgo blob.svg -o blob.min.svg- The seed only chooses geometry, so a very long one buys nothing and bloats every shared link; the refusal quotes the length it saw. The command it offers is for an exported file, not the seed.
Colour 1 must be a hex colour written as #rrggbb or #rrggbbaa. Received "rebeccapurple". Named colours, rgb() and oklch() are not accepted here — edit the fill in the copied file instead.- Colours are read as six or eight hex digits and re-emitted untouched, which keeps a colour parser out of this page. Anything else is named and turned down; edit the fill afterwards.
Points must be a whole number from 3 to 24. Received 1000000.- Sliders cannot reach this, but a hand-edited link can. Out-of-range numbers are refused with the range and the value quoted, never clamped: a silent clamp would make a shared link draw what its sender never saw.
FAQ
Will the same seed give me the same shape next month?
Yes. The generator reads only the seed and the parameter values, and each document carries a version marker naming the generation that drew it. If the geometry ever changes, that marker changes too.
Why does the colour field only accept hex values?
Hex is what a colour input already gives, and its eight-digit form carries transparency in the same token, so no separate opacity attribute is needed. Nothing else is interpreted here: what you pick is what the file gets.
How large can the canvas and the shape counts go?
Width and height run 32 to 4,096 units, a blob takes 3 to 24 points, a wave 1 to 5 layers with 2 to 12 control points each, and a tile 4 to 256 units. Documents are capped at 64 KB.
Keyboard shortcuts
- ⌘/Ctrl + Enter
- Randomize the seed and redraw.
- ⌘/Ctrl + C
- Copy the SVG when nothing is selected; a selection or focused field keeps its own copy.
- ⌘/Ctrl + Shift + C
- Copy the SVG no matter what is selected.
- ⌘/Ctrl + S
- Download the .svg instead of the browser's save-page dialog.
- t
- Change the color theme unless a slider or field has focus.
- ? or ⌘/Ctrl + /
- Open the overlay that lists every shortcut this page binds.
- Esc
- Close the topmost dialog and leave the drawn shape alone.