The continents rebuilt as a cathedral window. Points scattered across the land are turned into Voronoi panels, each flooded with a jewel color and held in thick black leading, clipped to the real coastlines over a dark sea. The world glows like glass with the light coming through it. One /v1/geo call.
One mapjson call is rasterized to a land mask. A few hundred points are scattered by rejection sampling — kept only where they land on a continent — and fed to a d3.Delaunay Voronoi. Every cell is filled from a jewel palette and stroked in heavy near-black "lead," and the whole thing is clipped to the country outlines so only the land is glazed. On a dark ground it reads as backlit glass. Re-glaze to reshuffle the panels.
https://api.mapjson.com/v1/geo?layer=countries&filter=world&detail=high&format=geojson
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stained-Glass Earth</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0; background: #fafafa; font-family: system-ui, sans-serif; }
.wrap { max-width: 980px; margin: 2rem auto; padding: 0 1rem; }
#map { background: #100c0a; border-radius: 4px; overflow: hidden; }
#map svg { width: 100%; display: block; }
</style>
</head>
<body>
<div class="wrap">
<div id="map"></div>
<button id="repaint" style="margin-top:.7rem;font:12px ui-monospace,monospace;padding:6px 12px">↻ re-glaze</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
<script>
const W = 960, H = 560;
const svg = d3.select("#map").append("svg").attr("viewBox", `0 0 ${W} ${H}`);
const off = document.createElement("canvas"); off.width = W; off.height = H;
const octx = off.getContext("2d");
const JEWEL = ["#a3242b", "#c85a1c", "#d99a1e", "#2f7d4f", "#1f6f8f", "#274b8f", "#5e2f7a", "#8f2f5a", "#b58a2a"];
let feats = null, path = null, mask = null;
function paint() {
svg.selectAll("*").remove();
svg.append("rect").attr("width", W).attr("height", H).attr("fill", "#100c0a");
if (!feats) return;
const isLand = (x, y) => { x |= 0; y |= 0; return x >= 0 && y >= 0 && x < W && y < H && mask[(y * W + x) * 4] > 128; };
const pts = [];
let tries = 0;
while (pts.length < 620 && tries < 60000) { tries++; const x = Math.random() * W, y = Math.random() * H; if (isLand(x, y)) pts.push([x, y]); }
const defs = svg.append("defs");
defs.append("clipPath").attr("id", "land").selectAll("path").data(feats).join("path").attr("d", path);
const delaunay = d3.Delaunay.from(pts);
const vor = delaunay.voronoi([0, 0, W, H]);
const g = svg.append("g").attr("clip-path", "url(#land)").attr("stroke", "#0b0908").attr("stroke-width", 2.4).attr("stroke-linejoin", "round");
pts.forEach((p, i) => { const cell = vor.renderCell(i); if (cell) g.append("path").attr("d", cell).attr("fill", JEWEL[(Math.random() * JEWEL.length) | 0]).attr("fill-opacity", 0.92); });
// outer caming: coastline in lead
svg.append("g").selectAll("path").data(feats).join("path").attr("d", path).attr("fill", "none").attr("stroke", "#0b0908").attr("stroke-width", 2.2);
}
d3.json("https://api.mapjson.com/v1/geo?layer=countries&filter=world&detail=high&format=geojson").then((w) => {
feats = w.features;
const projection = d3.geoEqualEarth().rotate([-11, 0]).fitExtent([[20, 18], [W - 20, H - 18]], { type: "Sphere" });
path = d3.geoPath(projection);
const pc = d3.geoPath(projection, octx);
octx.fillStyle = "#000"; octx.fillRect(0, 0, W, H);
octx.beginPath(); feats.forEach((f) => pc(f)); octx.fillStyle = "#fff"; octx.fill();
mask = octx.getImageData(0, 0, W, H).data;
paint();
});
document.getElementById("repaint").addEventListener("click", paint);
</script>
</body>
</html>