World map arc

What's included

A world map in SVG, six routes drawing themselves one after another, twelve markers opening out as brackets and a card per route on hover. Two files: a stylesheet and a script. No dependencies, no build step, no network requests — the outlines of all 177 countries are written into the page.

Seven colour themes, two map styles — solid fills or a dot screen —, two marker styles, two animation modes, light and dark. The demo panel that drives all of it isn't a JavaScript toolbar: it's a checkbox and four groups of native radio buttons, which the stylesheet reads with :has().

Features

• Works without JavaScript — the seven themes, the two map styles, the markers and the light/dark switch all respond without a line of script. The keyboard too: the arrow keys move through a radio group because that's what the browser already does.
• Seven themes — navy, midnight, teal, forest, rose, snow, onyx. Each one sets the map, the background and the accent colour, in light and in dark.
• Staggered entrance — each arc draws in 1.5 s, its two markers arrive slightly ahead of it, and a marker's four brackets land one after another. Every delay is a CSS variable.
• Cards on hover and on focus — the route, the figure, the detail. Enter pins the card, Escape releases it.
• One variable for the scale — the panel and the cards all derive from --wma-font-size. The map scales itself through its own viewBox.
• No network requests — the original component downloads its map from a CDN every time it's shown. Here it's already there.

Dropping it into a page

Two files to load, then the markup:

<link rel="stylesheet" href="world-map-arc.css">
<script src="world-map-arc.js" defer></script>
<div class="wma wma--teal" data-wma-anime>
  <div class="wma__stage">
    <svg class="wma__toile" viewBox="0 0 993 540"
         preserveAspectRatio="xMidYMid meet">
      …  <!-- 177 countries, 6 arcs, 12 markers -->
    </svg>
  </div>
</div>

The full SVG is already written in demo.html: you copy it as it is. data-wma-anime triggers the entrance; without it, the map appears straight away in its final state. The component takes the size of its container.

What you should know

• The map weighs 43 kB compressed. That's the price of “no external requests” and “no JavaScript”: all 177 country outlines are in the HTML. In exchange, there's nothing to load, nothing to break if a CDN goes down, and the map is there on first paint.
• The controls need :has(). Chrome 105, Safari 15.4, Firefox 121. Below that, the panel hides itself rather than showing dead buttons, and the map keeps its default values.
• No inline styles, no inline scripts. Checked by serving the folder under a strict security policy, without unsafe-inline — not assumed.
• The design comes from elsewhere. The proportions follow those of a commercial Framer component. The code is original; the country outlines come from world-atlas (Natural Earth, public domain). The traffic figures are examples.