Dark Glow Map

<!-- Paints its own near-black surface and glow, so it looks identical on a light or dark page - no dark: variants needed. -->
<div class="relative w-full overflow-hidden rounded-2xl border border-gray-800 bg-gray-950">
  <div class="pointer-events-none absolute left-1/2 top-1/2 h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/25 blur-3xl" aria-hidden="true"></div>
  <div class="relative aspect-[2/1] w-full">
    <svg aria-hidden="true" viewBox="0 0 256 128" preserveAspectRatio="xMidYMid meet" class="absolute inset-0 h-full w-full text-blue-400/40">
      <defs>
        <pattern id="darkglow-grid" width="8" height="8" patternUnits="userSpaceOnUse">
          <circle cx="4" cy="4" r="1.4" fill="currentColor" />
        </pattern>
      </defs>
      <rect width="256" height="128" fill="url(#darkglow-grid)" opacity="0.5" />
    </svg>
    <button type="button" aria-label="San Francisco" style="left:16%;top:42%" class="absolute flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400">
      <span class="h-3 w-3 rounded-full bg-blue-400 ring-4 ring-blue-400/30"></span>
    </button>
    <button type="button" aria-label="London" style="left:49%;top:33%" class="absolute flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400">
      <span class="h-3 w-3 rounded-full bg-blue-400 ring-4 ring-blue-400/30"></span>
    </button>
    <button type="button" aria-label="Singapore" style="left:74%;top:63%" class="absolute flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400">
      <span class="h-3 w-3 rounded-full bg-blue-400 ring-4 ring-blue-400/30"></span>
    </button>
  </div>
</div>