Dotted Rotating Globe

<!--
  The globe is one SVG (dots + wireframe) that spins, with a *separate* static
  highlight div on top so the light source stays fixed while the planet turns.
  The whole thing is aria-hidden: it illustrates, it carries no text.
-->
<style>
  @keyframes gdr-spin { to { transform: rotate(1turn); } }
</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:240px;height:240px;max-width:100%" aria-hidden="true">
    <svg viewBox="0 0 200 200" class="h-full w-full text-blue-600/60 [animation:gdr-spin_32s_linear_infinite] motion-reduce:[animation:none] dark:text-blue-400/60">
      <defs>
        <pattern id="gdr-dots" width="8" height="8" patternUnits="userSpaceOnUse">
          <circle cx="1.6" cy="1.6" r="1.3" fill="currentColor" />
        </pattern>
        <clipPath id="gdr-clip"><circle cx="100" cy="100" r="92" /></clipPath>
      </defs>
      <g clip-path="url(#gdr-clip)">
        <rect width="200" height="200" fill="url(#gdr-dots)" />
        <ellipse cx="100" cy="100" rx="92" ry="20" fill="none" stroke="currentColor" stroke-opacity="0.4" />
        <ellipse cx="100" cy="76" rx="74" ry="13" fill="none" stroke="currentColor" stroke-opacity="0.3" />
        <ellipse cx="100" cy="124" rx="74" ry="13" fill="none" stroke="currentColor" stroke-opacity="0.3" />
        <ellipse cx="100" cy="100" rx="30" ry="92" fill="none" stroke="currentColor" stroke-opacity="0.3" />
        <ellipse cx="100" cy="100" rx="62" ry="92" fill="none" stroke="currentColor" stroke-opacity="0.3" />
      </g>
      <circle cx="100" cy="100" r="92" fill="none" stroke="currentColor" stroke-opacity="0.55" />
    </svg>
    <div class="pointer-events-none absolute inset-0 rounded-full bg-[radial-gradient(circle_at_34%_30%,rgba(255,255,255,0.55),transparent_55%)]"></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">Global by default</h3>
    <p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Edge nodes in 34 regions keep every request close to home.</p>
  </div>
</div>