Animated Compass Completion Rate Card

<div class="bg-[#15151a]/50 border-white/5 border rounded-2xl pt-4 pr-4 pb-4 pl-4 backdrop-blur-sm max-w-xl">
  <h4 class="text-sm font-medium tracking-tight text-zinc-200 mb-4">
    Completion Rate
  </h4>
  <div class="flex items-center justify-center">
    <div class="relative w-[120px] h-[120px]">
      <!-- Compass SVG Animation -->
      <svg class="absolute inset-0" width="120" height="120" viewBox="0 0 120 120">
        <defs class="">

        </defs>

        <!-- Outer circle -->
        <circle cx="60" cy="60" r="52" stroke="rgba(255,255,255,0.05)" stroke-width="2" fill="none" class=""></circle>

        <!-- Cardinal directions markers -->
        <circle cx="60" cy="8" r="2" fill="rgba(139,92,246,0.6)" class=""></circle>
        <circle cx="112" cy="60" r="2" fill="rgba(139,92,246,0.4)" class=""></circle>
        <circle cx="60" cy="112" r="2" fill="rgba(139,92,246,0.4)" class=""></circle>
        <circle cx="8" cy="60" r="2" fill="rgba(139,92,246,0.4)" class=""></circle>

        <!-- Rotating compass needle -->
        <g style="animation: rotate-compass 8s linear infinite; transform-origin: 60px 60px;" class="">
          <!-- North pointer (red/primary) -->
          <path d="M 60,60 L 54,30 L 60,25 L 66,30 Z" fill="url(#compass-gradient)" opacity="0.9" class="">
            <animate attributeName="opacity" values="0.9;1;0.9" dur="2s" repeatCount="indefinite" class=""></animate>
          </path>

          <!-- South pointer (white/secondary) -->
          <path d="M 60,60 L 54,90 L 60,95 L 66,90 Z" fill="rgba(255,255,255,0.3)" class=""></path>

          <!-- Center dot -->
          <circle cx="60" cy="60" r="4" fill="rgba(139,92,246,0.8)" class="">
            <animate attributeName="r" values="4;5;4" dur="2s" repeatCount="indefinite" class=""></animate>
          </circle>
        </g>

        <!-- Decorative ring -->
        <circle cx="60" cy="60" r="45" stroke="rgba(139,92,246,0.2)" stroke-width="1" fill="none" stroke-dasharray="4 4"
          class="">
          <animate attributeName="stroke-dashoffset" from="0" to="8" dur="4s" repeatCount="indefinite" class="">
          </animate>
        </circle>
      </svg>

      <!-- Center text -->
      <div class="absolute inset-0 flex flex-col items-center justify-center">
        <span class="text-2xl font-semibold tracking-tight text-white" style="animation: fade-in 0.6s ease-out 0.8s forwards; opacity: 1;">
          90%
        </span>
        <span class="text-xs text-zinc-400" style="animation: fade-in 0.6s ease-out 1s forwards; opacity: 1;">On track</span>
      </div>
    </div>
  </div>
  <div class="mt-4 space-y-2 text-xs">
    <div class="flex items-center justify-between" style="animation: fade-in 0.5s ease-out 1.2s forwards; opacity: 1;">
      <span class="text-zinc-400">Automation rate</span>
      <span class="text-emerald-400">67/74</span>
    </div>
    <div class="flex items-center justify-between" style="animation: fade-in 0.5s ease-out 1.4s forwards; opacity: 1;">
      <span class="text-zinc-400">Success rate</span>
      <span class="text-zinc-200">96.8%</span>
    </div>
  </div>
  <style>
    @keyframes fade-in {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes rotate-compass {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</div>