Super Boring Tools

Search tools

Find a tool by name or what it does.

SVG Blob Generator

Design smooth, organic SVG blob shapes with sliders for complexity, randomness, size, and color, then copy the markup or download the file.

Preview
Shape
Fill color
SVG markup

Everything runs in your browser. Nothing is uploaded.

How to make an organic SVG blob

  1. Shape the blob

    Drag the complexity slider to set how many points form the outline and the randomness slider to set how far the shape drifts from a circle.

  2. Set size and color

    Use the size slider to set the pixel dimensions of the exported file, then pick a fill color with the swatch or type a hex value.

  3. Randomize for variety

    Press Randomize to reshuffle the points into a fresh blob at the same settings, then fine-tune the sliders from there.

  4. Copy or download

    The preview and the markup update as you adjust anything, so copy the SVG into your code or download a ready file when it looks right.

Why use this tool

Smooth organic shapes

Every blob is one smooth closed path built from points around a circle, so the outline stays soft and continuous with no hard corners.

Full control over the shape

Complexity sets the number of points, randomness sets how far they drift from a circle, and size sets the pixel dimensions of the exported SVG.

Any fill color

Set the fill with a color swatch or a hex value so the blob drops straight into your palette.

Randomize for fresh shapes

One button reshuffles the points into a new blob at the same settings, so you can flip through variations until one fits.

Copy the code or download the file

Take the SVG markup for a stylesheet or component, or download a ready .svg file. The preview always matches the output.

Runs entirely in your browser

The SVG is generated on your device. Nothing is uploaded, and there is no account or quota.

About this tool

The SVG blob generator draws the soft, organic blob shapes that show up behind headings, avatars, and hero sections all over modern web design. Rather than wrestling with path coordinates by hand, you set a handful of controls and the blob redraws instantly. Complexity sets how many points sit around the shape, so a low count gives a rounded, pebble-like form and a higher count gives a wavier, more lobed outline. Randomness controls how far each point drifts from a perfect circle, from a clean ellipse at zero to a loose, hand-drawn blob at the top of the range.

Every blob is a single smooth closed path, so it stays crisp at any size and scales cleanly on high-density screens. The size control sets the width and height of the exported SVG in pixels, and the fill accepts any hex color to match your palette. Press Randomize to reshuffle the points into a fresh shape while keeping the same complexity and randomness, then nudge the sliders until it feels right. When you are happy, copy the markup straight into an HTML page, a background, or a component, or download a ready .svg file. If you need a raster version for a social image or an email, run the file through the SVG to PNG converter.

Nothing is uploaded and there is no account. The blob exists only in your browser tab. The gradient generator pairs well for filling the shape, and the SVG wave generator covers the other common organic divider.

Frequently asked questions

How does the blob generator work?
You set the complexity, randomness, size, and fill color, and the tool places that many points around a circle, varies their distance from the center, and connects them into one smooth closed shape. The preview and the markup come from the same settings, so the code you copy is exactly what you see.
What do complexity and randomness do?
Complexity is the number of points around the shape, so lower values give rounded, pebble-like blobs and higher values give wavier outlines with more lobes. Randomness is how far each point moves in or out from a perfect circle, from a clean ellipse at zero to a loose, irregular blob at the top.
Does the size change the shape?
No. Size sets the width and height of the exported SVG in pixels, so a larger value gives a bigger file with the same outline. Because the blob is a smooth path, it stays sharp at any size you export.
What format is the output?
The output is an SVG, so it stays sharp at any size and pastes into an HTML page, a stylesheet, or a component. It is a single filled path. If you need a raster image instead, convert the SVG to a PNG with the SVG to PNG tool.
Why does each randomized blob look different?
Randomize gives every point a new distance from the center, so the outline reshuffles into a fresh shape while keeping the same complexity and randomness. The sliders still work afterward.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.

Related tools