Topographic Contour Map
Living terrain map with marching squares isolines and elevation labels.
What is Topographic Contour Map?
Topographic Contour Map is a free Canvas 2D web effect in the TappyPrism library. Living terrain map with marching squares isolines and elevation labels. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (topographic.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Contour Density, Animation Speed — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Contour Density | NUM_CONTOURS | 4 – 30 | 14 |
| Animation Speed | TIME_SPEED | 0 – 0.5 | 0.15 |
How to add Topographic Contour Map to your page
- Download the standalone file topographic.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/topographic.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Topographic Contour Map"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'NUM_CONTOURS', value: 14 }, '*');
Frequently asked questions
What is Topographic Contour Map?
Topographic Contour Map is a free Canvas 2D web effect in the TappyPrism library. Living terrain map with marching squares isolines and elevation labels. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (topographic.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Contour Density, Animation Speed — adjustable in the browser or at runtime.
How do I add Topographic Contour Map to my website?
Download the standalone file at https://prism.tappypotato.com/fx/topographic.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/topographic.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Topographic Contour Map"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'NUM_CONTOURS', value: 14 }, '*').