Handitab

SVG Blob Generator

Generate a random organic blob shape as SVG: set the number of points, irregularity, and fill color, then copy or download the code.

About SVG Blob Generator

An SVG blob is a smooth, irregular closed shape used as a background or image mask. This generator places points evenly around a circle, moves each one toward the centre by a random amount up to the irregularity you set, and joins them with a Catmull-Rom spline converted to cubic Bezier curves, so the outline has no corners. The result is one path element in a 200 by 200 viewBox that scales to any size without losing sharpness.

How to use SVG Blob Generator

  1. Fill in "Points", "Irregularity" and "Fill color".
  2. The result appears below. Press "New shape" for a new one.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about SVG Blob Generator

How do I use the blob as a CSS background or mask?

Save the SVG file and reference it with background-image: url(blob.svg), or use it with mask-image to clip a photo to the shape. You can also paste the SVG code straight into your HTML.

Runs in your browser. Page last updated .

More image tools

All 73 image tools
SVG OptimizerShrink SVG code by removing comments, editor metadata, and extra whitespace and by rounding long decimals, then compare the size.SVG to CSS ConverterConvert SVG code into a CSS background-image with a URL-encoded data URI, so the graphic loads without a separate image file.SVG ViewerPaste SVG code to see it rendered, check its width, height, and viewBox, count its elements, and download it as an SVG file.SVG Wave GeneratorGenerate a smooth SVG wave for a section divider: set the number of peaks, height, and color, flip it, then copy or download the code.Text to Image ConverterTurn text, a quote, or an emoji into an image with your choice of size, font, text color, and background, then download it as PNG, JPG, or WebP.Transparent Background MakerMake one solid color in an image transparent, such as the white background behind a logo, set the tolerance, and download a transparent PNG.