Scallop
Free, no sign-up, runs in your browser.
Nine circular arcs across the width — the classic scalloped edge you see on awnings, tickets and price tables. The arcs carry the shape, so this style ignores the randomness slider entirely.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 9 |
| Amplitude | 48% |
| Randomness | 0% |
| Baseline | 55% |
| Layers | 1 |
| Smoothness | 100% |
| Seed | 300 |
What to know
- True arcs rather than approximated curves, so every bump is identical.
- Amplitude controls how deep the scallops are, from a shallow ripple to half-circles.
- At 382 bytes it is lighter than a smooth wave of comparable detail.
What it costs in bytes
This exact shape is 382 bytes as an SVG and 543 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 | 382 B |
| CSS background | 543 B |
| CSS clip-path | 574 B |
The start of the SVG for Scallop
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-160 176A80 52.53 0 0 1 0 176A80 52.53 0 0 1 160 176A80 52.53 0 0 1 320 176A80 52.53 0 0 1 480 176A80 52.53 0 0 1 640 176A80 52.53 0 0 1 800 176A80 52.53 0 0 1 960 176A80 52.53 0 0 1 1120 176A80 52.53 0 0 1 1280 176A80 5…In more detail
The randomness slider is hidden for this style rather than left inert. Scallops are defined by being even — letting noise move the arc endpoints would give bumps at inconsistent heights, which reads as a rendering fault rather than as texture, so the generator keeps the points on the baseline and lets the arcs do the work.
Questions
How do I change Scallop once I have it?
Open the generator, click Scallop 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 300 with 9 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.