Generative SVG art

SVG blob & wave generator.

Create beautiful organic blob shapes and wave section dividers with adjustable complexity, gradients, and colours. Download the SVG or copy the code — no sign-up required.

Shape Controls

Complexity (Points)8

Randomness0.5

Colour

Gradient

Start colour

End colour

Gradient Angle135°

Live Preview

SVG Code

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="solvey-gradient" x1="0%" y1="0%" x2="100%" y2="100%" gradientTransform="rotate(135)">
      <stop offset="0%" stop-color="#6366f1" />
      <stop offset="100%" stop-color="#ec4899" />
    </linearGradient>
  </defs>
  <path d="M 50.00,-7.88 C 61.75,-6.61 74.74,8.92 81.44,18.56 C 88.13,28.21 89.90,39.24 90.18,50.00 C 90.46,60.76 89.83,73.72 83.14,83.14 C 76.44,92.56 61.65,105.91 50.00,106.52 C 38.35,107.13 20.55,96.20 13.22,86.78 C 5.88,77.36 6.35,62.64 5.98,50.00 C 5.61,37.36 3.63,20.61 10.97,10.97 C 18.30,1.32 38.25,-9.15 50.00,-7.88 Z" fill="url(#solvey-gradient)" />
</svg>

Blob Tips

•Great for hero backgrounds, avatar frames, and decorative accents
•Higher complexity creates more organic, detailed edges
•Keep randomness low (0.1–0.3) for subtle, circular shapes

Organic blobs

Generate smooth, randomised blob shapes with adjustable complexity and randomness. Perfect for hero backgrounds, avatar frames, and decorative elements.

Wave dividers

Create smooth wave section dividers with configurable wave count, amplitude, and vertical position. Ideal for separating page sections elegantly.

Custom gradients

Apply solid fills or two-colour linear gradients with adjustable angle. Pick colours with a visual colour picker or enter hex codes directly.

How to use it

Getting a useful result.

Adjust the controls until the shape looks right. Fewer points and lower randomness give a calmer shape; more of both gets busy quickly.
Copy the SVG and paste it directly into your page, or save it as a .svg file.
Set the fill from CSS rather than baking a colour in, so the shape follows your palette instead of pinning you to whatever colour it was generated with.
Add aria-hidden="true" if it is decoration, which it almost always is. A screen reader announcing a background shape is pure noise.

The reason to use a generated SVG rather than a background photograph is weight and sharpness. A shape like this is a few hundred bytes of instructions, stays crisp on any screen, and costs nothing to scale — where a decorative background image is typically a hundred kilobytes or more and is the sort of thing that quietly becomes the slowest element on a page.

Used well, one soft shape behind a section gives a flat layout somewhere for the eye to rest. Used badly it becomes the 2019 look: three overlapping blobs, a wave divider between every section, and no clear hierarchy. One per screen, low contrast, behind the content rather than competing with it.

Run anything you generate elsewhere through the SVG optimizer before it goes live — exported files carry a lot of dead weight.

Common questions

How do I change the colour after generating it?

Remove the fill attribute from the SVG and set fill from your stylesheet, or give the path a class. That way the shape inherits your brand colour and keeps working if you change the palette later, including in a dark theme.

Is an SVG shape better than a background image?

For flat shapes and gradients, considerably. It is a fraction of the file size, it never looks soft on a high-resolution screen, and it can be recoloured in CSS. A photograph is still a photograph — use an image for that, compressed properly.

Will these shapes slow my page down?

No, in practical terms. They are markup rather than a download, so there is no extra request and nothing to wait for. The only cost worth watching is animating one continuously, which asks the browser to keep redrawing it.

A generator gives you a shape; a brand needs the system the shape sits inside — graphic design.