A blob is already made. Press “Another one” for a new one, or switch to a star or a polygon, pick the number of points, and download a single clean path.

Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.

How to make a shape

The page opens with a blob. Press “Another one” until you get one you like; “Back to the last one” undoes a press.
Or choose Star or Polygon, and the number of points or sides.
Under Fine-tune, set the size, the colour, and how much a blob wobbles or how deep a star’s points are.
Download the SVG, or copy its code.

What each shape is

Blob. A soft, lopsided round shape of the kind used behind photos and headings. It is made by placing points evenly round a circle, pulling each one in towards the middle by a random amount (up to 35% of the radius unless you change the wobble), and running one smooth closed curve through them all. Seven points to begin with; fewer give a simpler shape, more a lumpier one. This is what people mean by an SVG blob.
Star. Any number of points from 3 to 24, with one pointing straight up. The inner corners sit at 45% of the way out unless you change it: nearer the middle for a spiky star, further out for a plump one. A five-pointed star has ten corners.
Polygon. A regular shape with 3 to 24 equal sides and a corner at the top: a triangle, a pentagon, a hexagon, an octagon and so on.

What is in the file

Every shape is one <path> on a square page, 400 × 400 pixels unless you set another size, with a single fill colour and nothing else: no groups, no transforms, no styles to untangle. A star or polygon is straight lines between its corners. A blob is one cubic Bézier curve for each of its points, each leaving and arriving in line with its neighbours, so there are no corners anywhere on it.

The corners of a star or polygon lie on a circle 96% as wide as the page, which leaves a thin margin. A blob’s points are placed within a circle 80% as wide as the page, because a smooth curve swings a little wider than the points it passes through.

Because the path is closed and filled, it works as a shape to cut or engrave as well as a picture for a web page. In CSS it can be a background, or a clip-path if you copy the path data out of it.

Seeds

A blob’s shape comes from a seed, a whole number shown beside the result and written into the file’s name, as in blob-4821.svg. The same seed with the same number of points and the same wobble always gives the same blob, so you can come back for it at another size or in another colour. Stars and polygons have nothing random in them and no seed.

What this page does not make

Rounded corners on stars and polygons, outlines without a fill, gradients, and blobs that move. For the basic SVG elements themselves, the circle, the rectangle and the polygon as written by hand, see the guide to SVG shapes.

Questions

How do I get a rounder or a wilder blob?

Open Fine-tune and move the wobble. At 5% the blob is nearly a circle; at 80% some points are pulled most of the way to the middle and the shape gets deep bays. More points with a high wobble give the most irregular shapes.

Can I animate the blob?

Not with this page: it saves one still shape. A blob that morphs is made by moving between two paths with the same number of points, in CSS or with a script. Two blobs from here with the same number of bumps have matching paths to start from.

Is a star from here a true regular star?

Its outer points are evenly spaced on one circle and its inner corners on another, so it is symmetrical. It is the filled outline of a star, not the crossed-lines star drawn in one stroke.

What units is the shape in?

Pixels, on a square page of the size you set. An SVG scales without loss, so the number only matters as a starting size; use the resize tool to state it in millimetres or inches.

SVG shape generator