SVG Animated Badge Card

<div class="sabc-card">
  <svg class="sabc-badge" viewBox="0 0 60 60" width="60" height="60">
    <circle class="sabc-circle" cx="30" cy="30" r="24" fill="none" stroke="#6366f1" stroke-width="2"></circle>
    <path class="sabc-check" d="M20 30 L27 37 L40 24" fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
  </svg>
  <div class="sabc-text">
    <h3>Verified</h3>
    <p>Authenticated user</p>
  </div>
</div>

.sabc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #1e293b;
  border-radius: 16px;
  width: 240px;
}
.sabc-circle {
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: sabc-draw-circle 1s ease forwards;
}
.sabc-check {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: sabc-draw-check 0.5s ease forwards 0.8s;
}
@keyframes sabc-draw-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes sabc-draw-check {
  to { stroke-dashoffset: 0; }
}
.sabc-text h3 { margin: 0 0 2px; font-size: 16px; color: #e2e8f0; }
.sabc-text p { margin: 0; font-size: 12px; color: #64748b; }