Random Mountain Range SVG
Generate a 3-layer fractal-noise mountain range SVG from a seed.
Overview
The Random Mountain Range SVG generator produces a layered, parallax-style mountain silhouette in pure SVG from a seed string. The output is a single self-contained SVG with three overlapping ranges in cool blues, ideal as a hero-section background, a slide deck divider or a podcast cover.
This generator is aimed at frontend designers building landing pages, slide-deck creators looking for a tasteful divider and game designers prototyping menu backdrops. Long-tail searches like "svg mountain range generator", "parallax mountains background css" and "deterministic procedural landscape svg" all resolve here.
How it works
The tool uses a 1D fractal-noise function (value noise summed across multiple octaves) to generate three jagged horizontal silhouettes. Each octave doubles the frequency and halves the amplitude, so the result has both broad peaks and fine ridge detail. The PRNG is seeded with the FNV-1a hash of your input string, which means the same seed always produces the same range — useful when you want a stable hero background.
Three independent noise lines are stacked vertically with decreasing height and increasing colour saturation to simulate atmospheric perspective; nearer ranges appear bolder, farther ones fade toward the sky. Each silhouette is rendered as a closed <path> with the bottom edge of the viewport, so it fills cleanly without leaving gaps.
Examples
Seed "alpine" → 3 cool-blue ridges with sharp peaks
Seed "twilight" + octaves 5 → softer, more rolling profile
Same seed re-run → byte-identical SVG
Output → ~1.5 KB SVG, scales to any size
FAQ
Is the same seed reproducible?
Yes. The seed is hashed deterministically and feeds a seeded PRNG, so the SVG path is identical on every render.
Can I change the colours?
Yes. The SVG uses inline fill values, so swap them in the output or wrap the SVG in CSS variables for theming.
How is the noise generated?
Multi-octave 1D value noise: pick random heights at integer positions, interpolate between them with a smoothstep curve and sum several octaves at doubling frequencies.
Will it tile horizontally?
Each range is a single closed path with hard left and right edges. Stitch two copies side by side and adjust the seed to taste for a wider scene.
Can I export to PNG?
Yes. Drag the SVG into a vector editor or use any browser print-to-image flow to rasterise at the size you need.