No fills, no glow — just line. Each continent is filled with fine parallel hatching set at its own angle, the way an engraver would distinguish regions on a printing plate or a banknote. Africa leans one way, Asia another; the ink tone shifts by continent.
https://api.mapjson.com/v1/geo?layer=countries&filter=world&detail=medium&properties=continent
<!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: #efe7d3; }
svg { width: 100%; height: auto; display: block; }
</style>
</head>
<body>
<svg id="map"></svg>
<script>
const W = 1100, H = 640;
const svg = d3.select("#map").attr("viewBox", `0 0 ${W} ${H}`);
const projection = d3.geoNaturalEarth1().rotate([-11, 0]);
const path = d3.geoPath(projection);
const ANG = {"Africa":15,"Asia":75,"Europe":135,"North America":45,"South America":105,"Oceania":165,"Antarctica":0};
const INK = {"Africa":"#6b4423","Asia":"#6b2b30","Europe":"#274069","North America":"#264d33","South America":"#4a2b5c","Oceania":"#1d4f4b","Antarctica":"#3c4149"};
const defs = svg.append("defs");
const key = c => "h" + c.replace(/\W/g,"");
Object.keys(ANG).forEach(c=>{
const p = defs.append("pattern").attr("id", key(c)).attr("patternUnits","userSpaceOnUse")
.attr("width",5).attr("height",5).attr("patternTransform",`rotate(${ANG[c]})`);
p.append("line").attr("x1",0).attr("y1",0).attr("x2",0).attr("y2",5).attr("stroke", INK[c]).attr("stroke-width",0.85);
});
d3.json("https://api.mapjson.com/v1/geo?layer=countries&filter=world&detail=medium&properties=continent&format=geojson").then(fc=>{
projection.fitExtent([[14,14],[W-14,H-14]], fc);
svg.append("g").selectAll("path").data(fc.features).join("path").attr("d", path)
.attr("fill", d => { const c = d.properties.continent; return (c && ANG[c] != null) ? `url(#${key(c)})` : "none"; })
.attr("stroke", "#2c2822").attr("stroke-width", 0.5).attr("stroke-linejoin","round");
});
</script>
</body>
</html>