Generators

SVG Blob Generator

Organic blob SVG paths with adjustable complexity and colors.

Loading interactive tool…

Embed this tool on your site

About this tool

An SVG blob generator that places 3 to 8 points around a circle at random distances from the centre and joins them into a single closed path, giving you an irregular, faceted shape for backgrounds and accents. A Complexity slider sets the number of points, a numeric Seed makes every shape reproducible, and the Random seed button rolls a new silhouette. Fill and stroke colour pickers style the shape before you copy it. Each shape is a straight-edged polygon rather than a curved Bézier blob, which gives a modern low-poly look. The output is a single inline SVG with a 0 0 200 200 viewBox, typically around 250 to 300 bytes, so it drops straight into JSX, static HTML, or Figma without an asset pipeline. The preview and markup update live as you change any setting. Because generation happens locally in your browser, nothing uploads to a server, making it safe for client work under NDA.

Why use it

  • Inline SVG Markup: The exported path drops straight into JSX or static HTML without an asset pipeline. Because it is inline, you can override the fill with CSS, making theme switching across light and dark modes simple.

  • Reproducible Seeds: The same seed and complexity always produce the same shape, so you can note a seed number and recreate the exact blob later or share it with a teammate.

  • Colour Pickers: Set fill and stroke colours before copying so the SVG arrives ready to use — no hand-editing of hex values in the markup.

  • Tiny Output: A generated shape is roughly 250 to 300 bytes of markup — smaller than most icon SVGs — so it suits pages with tight performance budgets.

  • Live Preview: Every change to the slider, seed or colours re-renders the preview and markup immediately, so you can iterate through many silhouettes in seconds.

  • Browser-Local: No files are uploaded and no account is required. The shape is computed in your browser, so client artwork under NDA never leaves your machine.

How to use

  1. Move the Complexity (3-8) slider to choose how many points the shape has — 3 gives a triangle-like shard, 8 a rounder, many-sided shape.
  2. Type a number in the Seed field to get a specific, repeatable shape, or click Random seed to roll a new one.
  3. Pick a Fill colour and a Stroke colour; the outline is always drawn 2px wide.
  4. Check the Preview — it and the SVG markup update instantly whenever you change a setting.
  5. Click Copy SVG to copy the markup (or edit it in the textarea first), then paste it into your component or HTML page and size it with CSS.

When it helps

  • When building a hero section and you want an organic decorative shape behind the headline without the weight of a PNG or JPG.
  • When prototyping a landing page in Figma or code and you need a fast placeholder shape that already looks intentional.
  • When a client wants softer, more modern visual language than rectangles and circles but you do not have time for an Illustrator session.
  • When adding a colorful accent element to a card, badge, or callout box that needs a shape more interesting than a rounded rectangle.
  • When creating social media graphics and you need a styled background shape that can be exported and placed in any design tool.
  • When a developer needs a lightweight decorative SVG they can inline directly into a React or Vue component without adding a file to the asset pipeline.

Examples

Default five-point blob

Input

Complexity: 5, Seed: 12345, Fill: #60a5fa, Stroke: #1f2937

Expected result

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="260" height="260"><path d="M 193.27 100.00 L 121.34 165.66 L 38.97 144.34 L 29.25 48.60 L 123.59 27.40 L 193.27 100.00 Z" fill="#60a5fa" stroke="#1f2937" stroke-width="2"/></svg>

Many-sided background shape

Input

Complexity: 8, Fill: #6366F1, Stroke: #6366F1

Expected result

An eight-point indigo polygon with no visible outline (stroke matches fill), about 290 bytes of markup — suitable behind a hero headline

Sharp accent shard

Input

Complexity: 3, Fill: #F59E0B, Stroke: #1F2937

Expected result

A three-point amber shape with a charcoal 2px outline, useful as a badge or callout backing

Tips

  • Higher complexity values (6-8) give rounder, calmer silhouettes for hero backgrounds; low values (3-4) give sharp shards that work as accents.
  • Write down the seed of a shape you like — entering the same seed and complexity later recreates it exactly.
  • Always wrap the SVG in a sized container or set its width with CSS — the markup ships with fixed 260px width and height attributes.
  • Set the stroke colour to match the fill when you want a borderless shape, since the 2px outline is always drawn.
  • Inline SVG in HTML lets you target the fill property via a CSS custom property, making light-dark theme switching as simple as swapping one variable value in your stylesheet.

Frequently Asked Questions

Can I edit the path further in Figma or Illustrator?
Yes. Copy the SVG markup and paste it into Figma, or save it as an .svg file and open it in Illustrator. Both tools convert the path to editable anchor points — you can round the corners there if you want a softer, curved blob.
Does the SVG scale without losing quality?
Completely. SVG is a vector format defined by math rather than pixels, so scaling to any size — including 4K displays — produces perfectly crisp edges. This is the main advantage over PNG blobs, which become blurry when scaled up.
Are the edges curved?
No. The generator connects its 3 to 8 points with straight line segments, so the result is an irregular polygon with a faceted, low-poly look. For smooth curves, round the corners in a vector editor after pasting.
How do I add a gradient fill to the blob?
Copy the exported SVG, open it in a text editor, and add a defs element containing a linearGradient or radialGradient with an id. Reference it with fill='url(#yourGradientId)' on the path element. Figma's gradient editor can also apply gradients after you import the shape.
What is the seed for?
The seed drives the random number generator that decides each point's distance from the centre. The same seed and complexity always give the same shape, so you can recreate a blob later. Click Random seed for a new value between 1 and 999,999.
What is the viewBox and how do I change it?
The viewBox attribute defines the coordinate system inside the SVG. The generator uses viewBox 0 0 200 200 with width and height set to 260. Edit or remove the width and height attributes, or size the SVG with CSS, to control its rendered size on the page.
Why does my blob look squished after embedding?
The SVG element is likely given a width and height that do not match its square viewBox. Set equal width and height on the SVG element, or add preserveAspectRatio='xMidYMid meet' to the SVG tag to enforce uniform scaling.
Can I export as PNG or download a file?
The tool only copies SVG markup; there is no download button. Paste the markup into a text file saved with an .svg extension, or open it in a browser or tool like Inkscape to rasterize it to PNG at your desired resolution.

Explore the category

SVG Pattern Generator Dots, grids, lines, and wave tiling patterns with SVG export. Color Palette Generator Generate random five-color hex palettes, lock favorites, and copy colors instantly. Raster to Vector Converter Convert PNG, JPG, or GIF images to scalable SVG vectors in your browser. Adjust colors, smoothness, and download. SVG to PNG Rasterise SVG vectors to sharp PNG Password Generator Generate strong random passwords QR Generator Generate QR codes from any text or URL
SVG Explained: Scalable Vector Graphics for Web Developers SVG is the only image format that is also code — you can write it by hand, animate it with CSS, and scale it to any size without quality los Apr 2026 · 10 min Raster vs Vector: When to Convert PNG/JPG to SVG Vector graphics scale infinitely; raster images don't. But not every photo belongs as SVG. Here's when tracing makes sense, when it doesn't, Apr 2026

Glossary

Polygon
A closed shape made of straight line segments joining a series of points. This generator's blobs are irregular polygons whose corners sit at random distances from a common centre.
viewBox
An SVG attribute that defines the internal coordinate space of the element. It controls how the SVG content maps to the rendered size and determines aspect ratio behavior during scaling.
SVG Path
The primary drawing element in SVG, described by a series of move, line, and curve commands in the d attribute. This generator produces a single closed path using move (M), line (L) and close (Z) commands.
Seed
A starting number for a pseudo-random generator. Using the same seed reproduces the same sequence of random values — here, the same blob shape.
Inline SVG
SVG markup embedded directly inside an HTML document rather than loaded as an external file. Inline SVG can be styled with CSS and manipulated with JavaScript, enabling dynamic color changes and animations.
Vector Graphic
An image format defined by mathematical shapes rather than pixel grids. Vector graphics scale to any size without quality loss, making them ideal for responsive web design and high-DPI displays.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities