Globe with Connection Arcs

<!--
  Two layers over the globe: decorative arcs drawn in the SVG (stroke-dashoffset
  animates them "flowing"), and real <button> location pings on top. The arcs
  are aria-hidden; the pings are focusable buttons with accessible names, because
  a marker a sighted user can hover must be reachable by keyboard too.
-->
<style>
  @keyframes gca-draw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
</style>

<figure class="mx-auto flex w-full max-w-sm flex-col items-center gap-5 px-4 py-8">
  <div class="relative aspect-square w-full max-w-[280px]">
    <svg viewBox="0 0 200 200" class="h-full w-full text-sky-600/60 dark:text-sky-400/60" aria-hidden="true">
      <defs>
        <pattern id="gca-dots" width="8" height="8" patternUnits="userSpaceOnUse">
          <circle cx="1.6" cy="1.6" r="1.2" fill="currentColor" />
        </pattern>
        <clipPath id="gca-clip"><circle cx="100" cy="100" r="90" /></clipPath>
      </defs>
      <g clip-path="url(#gca-clip)">
        <rect width="200" height="200" fill="url(#gca-dots)" />
      </g>
      <circle cx="100" cy="100" r="90" fill="none" stroke="currentColor" stroke-opacity="0.5" />
      <g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="260" class="[animation:gca-draw_3.5s_ease-in-out_infinite] motion-reduce:[animation:none]">
        <path d="M58 132 Q100 40 150 92" />
        <path d="M58 132 Q70 70 118 58" />
      </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-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950" style="left:29%;top:66%">
      <span class="absolute h-3 w-3 animate-ping rounded-full bg-sky-400/70 motion-reduce:hidden"></span>
      <span class="relative h-2.5 w-2.5 rounded-full bg-sky-500 ring-2 ring-white dark:ring-gray-950"></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">San Francisco</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-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950" style="left:75%;top:46%">
      <span class="absolute h-3 w-3 animate-ping rounded-full bg-sky-400/70 motion-reduce:hidden"></span>
      <span class="relative h-2.5 w-2.5 rounded-full bg-sky-500 ring-2 ring-white dark:ring-gray-950"></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">London</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-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950" style="left:59%;top:29%">
      <span class="absolute h-3 w-3 animate-ping rounded-full bg-sky-400/70 motion-reduce:hidden"></span>
      <span class="relative h-2.5 w-2.5 rounded-full bg-sky-500 ring-2 ring-white dark:ring-gray-950"></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">Berlin</span>
    </button>
  </div>
  <figcaption class="text-center text-sm text-gray-600 dark:text-gray-400">Live traffic across 3 regions</figcaption>
</figure>