Blob Shape Generator
Organic shapes, as SVG, a few hundred bytes each.
Organic shapes, as SVG, a few hundred bytes each.
How to use it
- Set the points. Fewer points give broad lobes, more give a wavier outline.
- Set the irregularity. Zero is a circle. Around 30 percent is the usual organic look.
- Press Again until you like one. Then download the SVG.
When you would use this
Organic blob shapes turn up as section backgrounds, as dividers behind headings and as a way to soften an otherwise rectangular layout. They are trivial to describe and slightly awkward to draw. The awkward part is the join. A blob is a closed curve through points sitting at varying distances from a centre, and if the curve handles are not tangent to the circle at each point, the outline shows a visible corner where the path closes. That single detail is the difference between a shape that looks drawn and one that looks generated. Each point's handle length here is scaled to its own radius, so a long spoke gets a proportionally long handle and the curve does not pinch. At zero irregularity the result is a circle to within a fraction of a pixel, which is the check that the curve maths is right. The output is one SVG path, a few hundred bytes, which you can paste into your markup or open in any vector editor to adjust by hand.
Questions
- Why does it change every time?
- Because the radius at each point is picked at random, which is what makes the shape organic rather than geometric. Press Again for another until one suits, and download that one.
- Why is the outline smooth all the way round?
- Because the curve handles are tangent to the circle at each point and scaled to that point's own radius. A naive version shows a visible corner where the path closes back on itself, which is the giveaway that a blob was generated badly.
- Can I edit the result?
- Yes. It is a single SVG path, so any vector editor will open it and let you drag the points. It is also small enough to paste straight into your markup.