Flat Dotted World Map

<!--
  A flat dot-map: stylised continents are paths filled with an SVG dot pattern
  (the map is decorative, aria-hidden). Locations on top are real <button>s with
  accessible names and a pulsing ping - hoverable *and* keyboard reachable.
-->
<figure class="mx-auto w-full max-w-lg px-4 py-8">
  <div class="relative w-full overflow-hidden rounded-xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/60">
    <svg viewBox="0 0 320 170" class="block w-full text-slate-400/70 dark:text-slate-500/70" aria-hidden="true">
      <defs>
        <pattern id="gfw-dots" width="7" height="7" patternUnits="userSpaceOnUse">
          <circle cx="1.4" cy="1.4" r="1.2" fill="currentColor" />
        </pattern>
      </defs>
      <g fill="url(#gfw-dots)">
        <path d="M60 30 C80 25 90 45 85 65 C95 80 80 120 62 130 C50 138 40 120 44 100 C36 80 45 45 60 30 Z" />
        <path d="M150 35 C170 30 180 50 172 68 C185 85 175 125 158 135 C146 140 140 120 146 100 C138 78 138 48 150 35 Z" />
        <path d="M210 40 C245 30 285 45 288 62 C292 80 265 92 240 88 C220 92 200 70 210 40 Z" />
        <path d="M250 108 C266 104 276 118 268 128 C258 136 244 130 246 118 Z" />
      </g>
    </svg>

    <button type="button" class="group absolute grid h-10 w-10 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50 dark:focus-visible:ring-offset-gray-900" style="left:20%;top:48%">
      <span class="absolute h-3 w-3 animate-ping rounded-full bg-rose-400/70 motion-reduce:hidden"></span>
      <span class="relative h-2.5 w-2.5 rounded-full bg-rose-500 ring-2 ring-white dark:ring-gray-900"></span>
      <span class="pointer-events-none absolute bottom-full mb-1 whitespace-nowrap rounded bg-gray-900 px-1.5 py-0.5 text-[11px] font-medium text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 dark:bg-gray-100 dark:text-gray-900">São Paulo</span>
    </button>
    <button type="button" class="group absolute grid h-10 w-10 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50 dark:focus-visible:ring-offset-gray-900" style="left:51%;top:34%">
      <span class="absolute h-3 w-3 animate-ping rounded-full bg-rose-400/70 motion-reduce:hidden"></span>
      <span class="relative h-2.5 w-2.5 rounded-full bg-rose-500 ring-2 ring-white dark:ring-gray-900"></span>
      <span class="pointer-events-none absolute bottom-full mb-1 whitespace-nowrap rounded bg-gray-900 px-1.5 py-0.5 text-[11px] font-medium text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 dark:bg-gray-100 dark:text-gray-900">Lagos</span>
    </button>
    <button type="button" class="group absolute grid h-10 w-10 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50 dark:focus-visible:ring-offset-gray-900" style="left:80%;top:38%">
      <span class="absolute h-3 w-3 animate-ping rounded-full bg-rose-400/70 motion-reduce:hidden"></span>
      <span class="relative h-2.5 w-2.5 rounded-full bg-rose-500 ring-2 ring-white dark:ring-gray-900"></span>
      <span class="pointer-events-none absolute bottom-full mb-1 whitespace-nowrap rounded bg-gray-900 px-1.5 py-0.5 text-[11px] font-medium text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 dark:bg-gray-100 dark:text-gray-900">Singapore</span>
    </button>
  </div>
  <figcaption class="mt-3 text-center text-sm text-gray-600 dark:text-gray-400">3 active regions</figcaption>
</figure>