Every country's outline, drawn ten times over — each copy rotated a little further around the centre and lit with additive colour. The borders you know spin into a symmetrical kaleidoscope; where lines cross, the colour brightens. Not a map to read, a map to hang on a wall.
https://api.mapjson.com/v1/geo?layer=countries&filter=world&detail=low
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
<style>
body { margin: 0; background: #05060d; }
svg { width: 100%; height: auto; display: block; }
</style>
</head>
<body>
<svg id="map"></svg>
<script>
const W = 900, H = 900, N = 10;
const svg = d3.select("#map").attr("viewBox", `0 0 ${W} ${H}`);
const projection = d3.geoNaturalEarth1().rotate([-11, 0]);
const path = d3.geoPath(projection);
d3.json("https://api.mapjson.com/v1/geo?layer=countries&filter=world&detail=low&format=geojson").then(fc=>{
projection.fitExtent([[W*0.16,H*0.16],[W*0.84,H*0.84]], fc);
for (let k = 0; k < N; k++){
const col = d3.hsl((k * 360 / N), 0.85, 0.6) + "";
svg.append("g")
.attr("transform", `rotate(${k * 360 / N}, ${W/2}, ${H/2})`)
.style("mix-blend-mode", "screen")
.selectAll("path").data(fc.features).join("path").attr("d", path)
.attr("fill", "none").attr("stroke", col).attr("stroke-width", 0.6)
.attr("stroke-opacity", 0.55).attr("stroke-linejoin", "round").attr("vector-effect", "non-scaling-stroke");
}
});
</script>
</body>
</html>