Checkmark pop

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/stroke-draw/checkmark-pop.html
  Desc   : Success checkmark — circle draws, check draws, then pops
  ============================================================
-->
<div class="sg-checkmark-pop" style="--sg-color:#2BA05A; --sg-size:72px; --sg-duration:1s;">
  <svg viewBox="0 0 52 52" role="img" aria-label="Success">
    <title>Success</title>
    <circle class="sg-checkmark-pop-ring" cx="26" cy="26" r="23" pathLength="100" />
    <path class="sg-checkmark-pop-check" d="M15 27 L23 34 L37 19" pathLength="100" />
  </svg>
</div>
<style>
  .sg-checkmark-pop {
    width: var(--sg-size);
    height: var(--sg-size);
  }
  .sg-checkmark-pop svg {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    animation: sg-checkmark-pop-scale calc(var(--sg-duration) * 0.5) cubic-bezier(0.3, 1.8, 0.5, 1) calc(var(--sg-duration) * 1.1) both;
  }
  .sg-checkmark-pop-ring,
  .sg-checkmark-pop-check {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: sg-checkmark-pop-draw var(--sg-duration) ease-out forwards;
  }
  .sg-checkmark-pop-check {
    animation-duration: calc(var(--sg-duration) * 0.6);
    animation-delay: calc(var(--sg-duration) * 0.5);
  }
  @keyframes sg-checkmark-pop-draw {
    to { stroke-dashoffset: 0; }
  }
  @keyframes sg-checkmark-pop-scale {
    0%   { transform: scale(0.85); }
    100% { transform: scale(1); }
  }
</style>