Mountain peaks
Free, no sign-up, runs in your browser.
Six points at near-full amplitude with the randomness well up, joined by straight lines. The uneven peaks are the point: a regular sawtooth reads as a pattern, while an irregular one reads as a landscape.
The settings behind it
| Generator | Wave |
|---|---|
| Points | 6 |
| Amplitude | 95% |
| Randomness | 72% |
| Baseline | 58% |
| Layers | 1 |
| Smoothness | 100% |
| Seed | 8801 |
What to know
- High randomness is what separates this from a plain zigzag — the peaks differ in height.
- Change the seed until the skyline suits you, then note it down.
- Reproducible from seed 8801.
What it costs in bytes
This exact shape is 231 bytes as an SVG and 392 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 | 231 B |
| CSS background | 392 B |
| CSS clip-path | 423 B |
The start of the SVG for Mountain peaks
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path d="M-240 141.66L0 214.67L240 271.21L480 226.23L720 126.44L960 110.47L1200 168.16L1440 133.24L1440 320L-240 320Z" fill="#4f46e5"/></svg>In more detail
Worth flipping vertically and using above a footer, where the peaks hang down like stalactites instead of rising. The flip is baked into the path rather than applied as a CSS transform, so the exported SVG stands alone either way.
Questions
How do I change Mountain peaks once I have it?
Open the generator, click Mountain peaks 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 8801 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.