I built a web tool that turns real elevation data into topographic contour line art — SVG + PNG export

TopoLines — Sat, 25 Jul 2026 14:50:45 +0000

Hey DEV Community 👋

For the past few months I've been building Topolines — a browser-based topographic contour map generator that turns real-world elevation data from anywhere on Earth into clean, stylised contour line art. You draw a box on a map, pick your settings, and it renders publication-quality topographic lines you can export as vector SVG or high-resolution PNG.

This is a follow-up to my first post about the designer workflow. This time I want to go deeper on how it actually works under the hood, show a gallery of real places, and talk about the elevation data pipeline — because a lot of you asked.

The Topolines editor — generating the Brittany coastline, France, from IGN RGE ALTI 5 m elevation data.

Why topographic contour maps are surprisingly hard to make

If you've ever needed topographic contour lines — for a poster, a UI hero background, a book cover, a brand pattern, a hiking map, or a data visualization — you've probably hit the same wall I did:

Heavy GIS software like QGIS, ArcGIS or GRASS has a brutal learning curve. Loading a DEM (Digital Elevation Model), reprojecting it, running a contour algorithm, then styling the output is a multi-hour job.
Static asset packs give you pre-made contour patterns that everyone else is also using — and you can't change the location, the contour interval, or the resolution.
Generative noise tools produce fake, math-looking squiggles that don't correspond to any real terrain or elevation.

I wanted something in between: real cartographic data, but with the frictionless creative control of a design tool. So I built it.

What Topolines does

Topolines is a real-time topographic line generator. Here's the full pipeline:

Search any place on Earth — cities, mountains, coastlines, islands, valleys, national parks — using the built-in geocoder.
Draw a bounding box on an interactive map to define your area of interest.
Choose your elevation precision:
- SRTM 30 m (free) — global coverage, great for large regions and mountain ranges.
- 10 m GeoTIFF (HD) — sharper terrain detail for smaller areas.
- IGN RGE ALTI 5 m in France — some of the highest-resolution open elevation data available anywhere.
Set the contour interval (e.g. every 5 m, 10 m, 20 m of elevation) to control line density.
Style everything: color gradients, stroke width, line taper, line join, simplification level, background, and optional elevation annotations / labels.
Export as clean vector SVG (opens perfectly in Figma, Adobe Illustrator, Inkscape, or as inline web code) or as an HD PNG raster.

The whole thing runs in the browser with no software to install, and the free tier lets you export PNGs without even creating an account.

The elevation data pipeline (for the curious)

Under the hood, the terrain comes from public open elevation datasets — primarily the AWS elevation-tiles-prod open data bucket (SRTM and derived GeoTIFF tiles), plus IGN RGE ALTI for France.

The processing chain is pure Python — rasterio to read the DEM, scikit-image's marching-squares implementation to trace the iso-elevation contours, shapely for geometry simplification, and Pillow for the raster output. Each contour line is a true iso-line connecting points of equal altitude — real cartography, not decorative noise.

The SVG is generated entirely server-side and streamed to you, so what you download is a genuine, editable vector file with real paths — not a traced bitmap.

A gallery of real places

All of these were generated straight from real elevation data, no manual editing:

Sarajevo, Bosnia and Herzegovina

Funchal, Madeira, Portugal

Montenegro mountains

Who it's for

Graphic designers & art directors building brand systems, patterns, and print layouts.
UI/UX & web designers who need topographic hero backgrounds and SVG textures.
Cartography & GIS enthusiasts who want fast, good-looking contour maps without a full GIS setup.
Hikers, climbers and outdoor brands visualising terrain and elevation of real trails and peaks.
Data visualization folks who want iso-line aesthetics grounded in real data.
Makers & print-on-demand sellers producing topographic posters and wall art of meaningful places.

Try it with your hometown

The best way to get it is to generate a place you actually know — your city, the mountain you last climbed, the coastline you grew up on. The terrain you recognise makes the contour lines click.

👉 topolines.app — free PNG export, no account needed.

I'd genuinely love feedback from this community: feature requests, edge cases, weird places that break it, export formats you'd want. Drop a comment with the place you generated — I read every one. 🙏

I built a vector topographic contour map generator for designers (SVG export)

TopoLines — Tue, 21 Jul 2026 00:40:34 +0000

Hey everyone! 👋

As a designer, I constantly needed high-quality vector topographic contour lines and generative patterns for branding, UI hero backgrounds, and print projects. Most existing tools were either heavy GIS software (like QGIS) or required static file purchases.

So I built Topolines—a fast, web-based vector topographic generator.

🎛️ Key Features:

Parametric Control: Fine-tune elevation density, noise scale, detail, and line weights in real-time.
Custom Styling: Full visual control over color palettes, gradients, contrast, and backgrounds.
Clean Vector Export: Instant SVG exports (perfect for Figma, Illustrator, or web code) and HD PNGs.
Frictionless Free Tier: Direct PNG exports without even needing an account.

I'd love for you to try it out at topolines.app and let me know your feedback or feature requests!

DEV Community: TopoLines