Circular Success Checkmark

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="success-check">
  <svg viewBox="0 0 100 100">
    <circle class="success-check__circle" cx="50" cy="50" r="42" fill="none" stroke="#22c55e" stroke-width="6"/>
    <path class="success-check__mark" d="M30 52l14 14 26-30" fill="none" stroke="#22c55e" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</div>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.success-check {
  width: 100px;
  height: 100px;
}
.success-check svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.5));
}
.success-check__circle {
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  animation: draw-circle 0.6s ease forwards;
}
.success-check__mark {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw-mark 0.4s ease forwards 0.6s;
}
@keyframes draw-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes draw-mark {
  to { stroke-dashoffset: 0; }
}