elefcode

SVG Blob & Pattern Generator

Organic blob shapes and seamless background patterns for hero sections and cards — download SVG or copy a CSS background.

Shape
Fill
Preview
Blob preview
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <defs>
    <linearGradient id="blob-gradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#8b5cf6"/>
      <stop offset="100%" stop-color="#ec4899"/>
    </linearGradient>
  </defs>
  <path d="M322.6,200C323,237.9 296.1,301.2 267.1,316.1C238,331.1 179,309 148.2,289.7C117.5,270.3 86.9,237.3 82.6,200C78.4,162.7 92.4,84.5 122.6,66C152.9,47.5 230.8,66.6 264.1,89C297.4,111.3 322.1,162.1 322.6,200Z" fill="url(#blob-gradient)"/>
</svg>

Advertisement

Guide

About the SVG Blob & Pattern Generator

Blobs — soft, irregular shapes — and subtle repeating patterns are a quick way to add depth to hero sections, cards and empty states. As SVG they are tiny, sharp at every size, and easy to recolour.

Press “New shape” until you like a blob, or pick a pattern and tune it. Each tile is drawn so its edges meet seamlessly when repeated.

How the blobs are drawn

The generator places points around a circle, pushes each one in by a random amount, and joins them with a smooth closed curve. The random numbers come from a seed, so the same settings always give the same shape — share the page link and the blob comes with it.

Patterns as CSS backgrounds

The CSS output embeds a single tile as a data URI and lets background-image repeat it, so there is no extra file to host. Keep pattern opacity low behind text so the content stays readable.

How to use it

  1. 1Choose Blob or Pattern.
  2. 2Generate a shape or pick a pattern style.
  3. 3Adjust colours, size and opacity.
  4. 4Download the SVG or copy the CSS.

Frequently asked questions

Can I animate a blob?

Yes. Generate two blobs with the same number of points and animate the path’s d attribute between them with CSS or SMIL; matching point counts morph smoothly.

Are the shapes free to use?

Yes. Everything is generated in your browser and is yours to use in any project, commercial or not.

How do I use the SVG in React?

Paste the markup into a component and change attributes to camelCase (stroke-width → strokeWidth), or import the downloaded file as an image.

Why does my pattern look blurry?

Very small tiles with thin lines can render softly on low-resolution screens. Use whole-pixel tile sizes and line weights of 1px or more.

How do I put a blob behind content?

Position it absolutely inside a relative container with a lower z-index, or use the CSS background version on the container itself.

Related tools

SVG Wave GeneratorMesh Gradient GeneratorCSS Gradient GeneratorSVG Optimizer