How to make an SVG blob or wave
- Choose Blob for an organic rounded shape or Wave for layered waves for section dividers and backgrounds.
- Adjust complexity and randomness (or layers, peaks and height for waves), pick a colour or gradient, and press New shape until you like it.
- Download an SVG (or a 1200 px PNG), or copy the SVG code straight into your HTML or design tool.
Organic shapes for modern design
Soft blobs and flowing waves are a staple of modern landing pages, illustrations, presentations and social graphics: behind product shots, as section dividers, or as playful backgrounds. Blobs are made by placing points around a circle at random distances from the centre and joining them with a smooth closed curve (a Catmull-Rom spline converted to cubic Bézier segments), so the outline is always smooth with no sharp corners. Waves join random points across the width with horizontal tangents and stack semi-transparent layers for depth.
The SVG output is tiny, scales to any size without losing sharpness and can be recoloured in code with CSS. Each shape is generated from a seed, so the preview, SVG and PNG always match. Everything runs in your browser.
How do I use the wave as a section divider?
Download the SVG, set it to full width with preserveAspectRatio="none" if needed, and place it at the bottom of a section.
Can I animate the blob?
Yes, for example by morphing between two generated paths with CSS or a JavaScript animation library.
Is the SVG free to use?
Yes. Shapes you generate are yours to use commercially.