Globe Network Nodes

<!--
  A mesh laid over the globe: static links in one <g>, nodes that twinkle via
  staggered opacity keyframes in another. All of it is one aria-hidden SVG - it
  is an abstract diagram, not data, so it stays out of the a11y tree.
-->
<style>
  @keyframes gnn-spin { to { transform: rotate(1turn); } }
  @keyframes gnn-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
</style>

<div class="flex w-full flex-col items-center gap-6 px-4 py-8 text-center">
  <div class="relative shrink-0" style="width:250px;height:250px;max-width:100%" aria-hidden="true">
    <svg viewBox="0 0 200 200" class="h-full w-full text-violet-600/70 dark:text-violet-400/70">
      <defs>
        <clipPath id="gnn-clip"><circle cx="100" cy="100" r="92" /></clipPath>
      </defs>
      <g class="[animation:gnn-spin_44s_linear_infinite] motion-reduce:[animation:none]" style="transform-origin:100px 100px">
        <circle cx="100" cy="100" r="92" fill="none" stroke="currentColor" stroke-opacity="0.4" />
        <ellipse cx="100" cy="100" rx="92" ry="24" fill="none" stroke="currentColor" stroke-opacity="0.25" />
        <ellipse cx="100" cy="100" rx="46" ry="92" fill="none" stroke="currentColor" stroke-opacity="0.2" />
        <g clip-path="url(#gnn-clip)" stroke="currentColor" stroke-opacity="0.4" stroke-width="1">
          <line x1="52" y1="70" x2="120" y2="52" />
          <line x1="120" y1="52" x2="150" y2="112" />
          <line x1="150" y1="112" x2="96" y2="150" />
          <line x1="96" y1="150" x2="52" y2="70" />
          <line x1="120" y1="52" x2="96" y2="150" />
        </g>
        <g fill="currentColor">
          <circle cx="52" cy="70" r="4" style="animation:gnn-pulse 2.4s ease-in-out infinite" />
          <circle cx="120" cy="52" r="4" style="animation:gnn-pulse 2.4s ease-in-out 0.5s infinite" />
          <circle cx="150" cy="112" r="4" style="animation:gnn-pulse 2.4s ease-in-out 1s infinite" />
          <circle cx="96" cy="150" r="4" style="animation:gnn-pulse 2.4s ease-in-out 1.5s infinite" />
        </g>
      </g>
    </svg>
    <div class="pointer-events-none absolute inset-0 rounded-full bg-[radial-gradient(circle_at_34%_30%,rgba(167,139,250,0.28),transparent_60%)]"></div>
  </div>

  <div class="max-w-md">
    <h3 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl dark:text-gray-100">One connected mesh</h3>
    <p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Nodes sync peer to peer, so a region can drop without a blip.</p>
  </div>
</div>