Verified Avatar

<div class="nuda-verified">
  <span class="nuda-verified__avatar"></span>
  <span class="nuda-verified__badge">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 13l4 4L19 7" />
    </svg>
  </span>
</div>

.nuda-verified {
  position: relative;
  display: inline-flex;
}

.nuda-verified__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg,#ffb45e,#ff6dd4);
}

.nuda-verified__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #62b6ff;
  color: #fafafa;
  border: 2px solid #09090b;
  animation: _verifPop .55s cubic-bezier(.34,1.56,.64,1) .2s both;
}

.nuda-verified__badge svg {
  width: 9px;
  height: 9px;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: _verifDraw .5s ease forwards .55s;
}

@keyframes _verifPop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes _verifDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-verified__badge {
    animation: none;
  }
  .nuda-verified__badge svg {
    stroke-dashoffset: 0;
    animation: none;
  }
}