World map arc

Ce qui est inclus

Une carte du monde en SVG, six liaisons qui se tracent l’une après l’autre, douze repères qui s’ouvrent en équerre et une fiche par liaison au survol. Deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête réseau — le tracé des 177 pays est écrit dans la page.

Sept thèmes de couleur, deux styles de carte — aplats ou trame de points —, deux styles de repère, deux modes d’animation, clair et sombre. Le panneau de démonstration qui pilote tout ça n’est pas une barre d’outils en JavaScript : c’est une case à cocher et quatre groupes de boutons radio natifs, que la feuille de style lit avec :has().

Fonctionnalités

• Marche sans JavaScript — les sept thèmes, les deux styles de carte, les repères et la bascule clair/sombre répondent sans une ligne de script. Le clavier aussi : les flèches parcourent un groupe de radios parce que c’est ce que le navigateur fait déjà.
• Sept thèmes — navy, midnight, teal, forest, rose, snow, onyx. Chacun définit la carte, le fond et la couleur d’accent, en clair comme en sombre.
• Entrée en cascade — chaque arc se trace en 1,5 s, ses deux repères le devancent légèrement, et les quatre équerres d’un repère se posent l’une après l’autre. Tous les délais sont des variables CSS.
• Fiches au survol et au focus — la liaison, le chiffre, le détail. Entrée épingle la fiche, Échap la relâche.
• Une variable pour l’échelle — le panneau et les fiches dérivent tous de --wma-font-size. La carte, elle, se met à l’échelle toute seule par son viewBox.
• Aucune requête réseau — le composant d’origine télécharge sa carte depuis un CDN à chaque affichage. Ici elle est déjà là.

Le poser dans une page

Deux fichiers à charger, puis le balisage :

<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 pays, 6 arcs, 12 repères -->
    </svg>
  </div>
</div>

Le SVG complet est déjà écrit dans demo.html : on le copie tel quel. data-wma-anime déclenche l’entrée ; sans lui, la carte s’affiche d’emblée à son état final. Le composant prend la taille de son conteneur.

Ce qu’il faut savoir

• La carte pèse 43 Ko compressés. C’est le prix de « sans requête externe » et « sans JavaScript » : les 177 tracés de pays sont dans le HTML. En échange, rien à charger, rien qui casse si un CDN tombe, et la carte est là au premier rendu.
• Les commandes demandent :has(). Chrome 105, Safari 15.4, Firefox 121. En dessous, le panneau se masque de lui-même plutôt que d’afficher des boutons morts, et la carte garde ses valeurs par défaut.
• Aucun style ni script en ligne. Vérifié en servant le dossier sous une politique de sécurité stricte, sans unsafe-inline — pas supposé.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant Framer commercial. Le code est original ; le tracé des pays vient de world-atlas (Natural Earth, domaine public). Les chiffres de trafic sont des exemples.