Arch cut-out
Free, no sign-up, runs in your browser.
The scallop inverted: the arcs curve into the coloured area rather than out of it, leaving a row of arched openings along the edge. Architectural rather than decorative, and the obvious choice for anything with a colonnade or gallery feel.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 6 |
| Amplitude | 62% |
| Randomness | 0% |
| Baseline | 50% |
| Layers | 1 |
| Smoothness | 100% |
| Seed | 302 |
What to know
- The arcs sweep the opposite way, which is one checkbox rather than a different shape.
- Six arches is close to the limit before the openings get too narrow to read.
- At 319 bytes it costs the same as the outward version.
What it costs in bytes
This exact shape is 319 bytes as an SVG and 480 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 | 319 B |
| CSS background | 480 B |
| CSS clip-path | 511 B |
The start of the SVG for Arch cut-out
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-240 160A120 75.39 0 0 0 0 160A120 75.39 0 0 0 240 160A120 75.39 0 0 0 480 160A120 75.39 0 0 0 720 160A120 75.39 0 0 0 960 160A120 75.39 0 0 0 1200 160A120 75.39 0 0 0 1440 160L1440 320L-240 320Z" fill="#4f46e5"/></svg>In more detail
Inward and outward arches are the same arc command with the sweep flag flipped, which is why this is a checkbox rather than a separate preset family. It is also why the two cost identical bytes: nothing about the path changes except a single digit.
Questions
How do I change Arch cut-out once I have it?
Open the generator, click Arch cut-out 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 302 with 6 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.