Contour Lines
Home
Snippets
Contour Lines
HTML
CSS
JS
<canvas id="map"></canvas> <div class="label">TOPOGRAPHIC FLOW</div>
body { margin: 0; height: 100vh; background: #050505; overflow: hidden; display: grid; place-items: center; font-family: system-ui, sans-serif; } canvas { display: block; } .label { position: absolute; bottom: 24px; color: rgba(255,255,255,0.6); font-size: 12px; letter-spacing: 3px; }
const canvas = document.getElementById("map"); const ctx = canvas.getContext("2d"); let w, h; function resize() { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; } window.addEventListener("resize", resize); resize(); let t = 0; function noise(x, y) { return Math.sin(x * 0.015 + t) + Math.cos(y * 0.015 + t); } function draw() { ctx.clearRect(0, 0, w, h); ctx.strokeStyle = "rgba(124,255,203,0.35)"; ctx.lineWidth = 1; for (let level = -2; level <= 2; level += 0.25) { ctx.beginPath(); for (let x = 0; x < w; x += 6) { const y = h / 2 + noise(x, level * 100) * 40 + level * 70; ctx.lineTo(x, y); } ctx.stroke(); } t += 0.01; requestAnimationFrame(draw); } draw();
Ad #1
Ad #2
Scroll to Top