Studio
GithubDribbbleTwitter
Richard Zimerman

January 03, 2019

How we made Blobmaker

Organic blob shapes have been trending in web design for a while. Making them can be a bit of a pain though. Enter Blobmaker, a simple tool to make lots of beautiful SVG blobs easily.

Share
banner
Blobmaker caption for this image

A while back Ian Latchmansingh wrote an article called “2017: The Year of the Blob” on how organic shapes became a pervasive design trend. Since the article came out, more and more blobs have made their way online as part of illustrations, elements used to delimit sections, or simply as visual elements on landing pages.

image 1
Blobs are everywhere

Creating smooth and organic shapes can be a challenge. Working on one shape is one thing, but once you have to make many unique blobs, things can get really tedious. I wanted something faster that would allow me to discover, rather than to engineer shapes.

I work a lot with data visualisation, and by chance, when I was playing with a d3 radar chart for another project, I noticed that when using a basis interpolation on a polar line, I got a very smooth curve that resembled a blob. For the prototype, I built the simplest possible radar chart, just a radial line without axes, numbers, or labels. This worked quite nicely, but more control was necessary.

image 2
Interpolations

Complexity and Contrast

There are two control parameters to control the blob shapes generated with Blobmaker: complexity and contrast.

Complexity determines how many points are used to create the blob. The more points you add, the more complex the blob can be.

Complexity

Contrast on the other hand determines the range of data points that will be fed to the chart. The smaller the contrast, the closer the blob resembles a circle. The more contrast, the more whacky the shapes can be.

Contrast

Serendipity

The most fun feature of Blobmaker is its ability to generate many random shapes quickly. Just tap that refresh button until you find the blob of your dreams ;)

Serendipity

I hope this article gives you some insight into the reasoning and story behind this small app. If you haven’t used it already, check out Blobmaker and spread the word :)

Get our latest articles on design, UX, data visualisation, and code in your inbox.

Have a project in mind? Get in touch and let's make something cool. 

hello@zcreativelabs.comGet in touch

Newsletter

Sign up to get our latest articles on design, data visualization, and code directly in your inbox.

z creative labs GmbH
Sihlquai 131, 8005 Zurich
Switzerland

GithubDribbbleTwitterEmail

© 2020 z creative labs GmbH