Sharp zigzag
Free, no sign-up, runs in your browser.
Nine points joined by straight lines instead of a curve. The corners are the shape here, and smoothing them even slightly turns a zigzag into a bad wave — which is why this is a separate join style rather than the smoothness slider turned down.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 9 |
| Amplitude | 58% |
| Randomness | 6% |
| Baseline | 55% |
| Layers | 1 |
| Smoothness | 100% |
| Seed | 2024 |
What to know
- Straight segments, so the file is a fraction of the size of a curve through the same points.
- Keep the randomness low: a zigzag reads as deliberate only while the teeth match.
- At 264 bytes it is one of the smallest shapes in the catalogue.
What it costs in bytes
This exact shape is 264 bytes as an SVG and 425 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 | 264 B |
| CSS background | 425 B |
| CSS clip-path | 456 B |
The start of the SVG for Sharp zigzag
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-160 140.02L0 177.61L160 215.5L320 236.17L480 227.82L640 197.67L800 154.53L960 121.73L1120 116.94L1280 139.19L1440 177.19L1440 320L-160 320Z" fill="#4f46e5"/></svg>In more detail
This is the cheapest divider here by a wide margin, because a line segment costs one coordinate pair where a cubic costs three. If you are adding a divider to a page that is already heavy, a zigzag at nine points costs less than a smooth wave at four and is arguably the more striking shape.
Questions
How do I change Sharp zigzag once I have it?
Open the generator, click Sharp zigzag 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 2024 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.