Rounded triangle
Free, no sign-up, runs in your browser.
Three points is the minimum a closed spline accepts, and it gives a rounded triangle rather than anything blob-like. Useful as a soft geometric accent where a circle would be too neutral.
The settings behind it
| Generator | Blob |
|---|---|
| Points | 3 |
| Randomness | 35% |
| Smoothness | 100% |
| Seed | 512 |
What to know
- Three points, so three lobes — the simplest closed shape the generator makes.
- The smallest blob in the catalogue at 217 bytes.
- Raise the randomness for a scalene look, drop it for something near-equilateral.
What it costs in bytes
This exact shape is 217 bytes as an SVG and 378 bytes as a CSS background — the data URI is larger because percent-encoding costs three characters for every character it escapes. Both figures are for the shape shown above, at two decimal places of coordinate precision.
| Format | Size |
|---|---|
| SVG | 217 B |
| CSS background | 378 B |
| CSS clip-path | 435 B |
| CSS border-radius | 108 B |
The start of the SVG for Rounded triangle
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M100 31.4C117.75 31.39,162.06 114.14,153.18 130.7C144.3 147.27,55.56 147.32,46.7 130.77C37.84 114.22,82.25 31.41,100 31.4Z" fill="#4f46e5"/></svg>In more detail
Three points is also the hardest case for the maths, which is why it is in the catalogue rather than hidden at the end of a slider. With only three, every point is both neighbours of the others and the wrap-around indexing has nowhere to hide — a closed-spline implementation that gets the seam wrong fails most visibly here, so it is the shape the test suite checks first.
Questions
How do I change Rounded triangle once I have it?
Open the generator, click Rounded triangle in the preset row, then drag anything. The preset is a starting point rather than a lock — every slider stays live, and the seed box takes a word if you would rather name your shape than number it.
Will it look the same next time?
Yes, as long as the seed is the same. This one is seed 512 with 3 points. The generator is deterministic, so those settings reproduce this exact curve on any device.
Can I use a different colour?
Yes — colour is applied when you export, not baked into the geometry. The preview above uses the tool default; pick your own in the generator and the SVG, the CSS background and the clip-path all follow.
Every figure and every shape on this page was produced by running the generator at build time, so it describes the tool you are about to use rather than a version of it that once existed.