spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/stroke-draw/checkmark-pop.html7  Desc   : Success checkmark — circle draws, check draws, then pops8  ============================================================9-->10<!--svgarden11title: Checkmark pop12slug: checkmark-pop13category: stroke-draw14tags: [draw, success, checkmark, sequence]15difficulty: intermediate16techniques: [pathLength, stroke-dashoffset, animation-delay, cubic-bezier-overshoot]17how_it_works: >18  Two draw animations run in sequence: the circle traces itself first, then the19  check stroke starts after a delay of half the duration — sequencing with20  animation-delay instead of one giant keyframe block keeps each part reusable.21  The final pop is a scale keyframe with a cubic-bezier whose y-value overshoots22  past 1, which is what gives the bounce without any JavaScript spring physics.23customizable:24  - { var: "--sg-color",    label: "Color", type: color, default: "#2BA05A" }25  - { var: "--sg-size",     label: "Size",  type: range, min: 32, max: 160, default: 72, unit: px }26  - { var: "--sg-duration", label: "Speed", type: range, min: 0.6, max: 3, step: 0.1, default: 1, unit: s }27created: 2026-08-1028-->29<div class="sg-checkmark-pop" style="--sg-color:#2BA05A; --sg-size:72px; --sg-duration:1s;">30  <svg viewBox="0 0 52 52" role="img" aria-label="Success">31    <title>Success</title>32    <circle class="sg-checkmark-pop-ring" cx="26" cy="26" r="23" pathLength="100" />33    <path class="sg-checkmark-pop-check" d="M15 27 L23 34 L37 19" pathLength="100" />34  </svg>35</div>36<style>37  .sg-checkmark-pop {38    width: var(--sg-size);39    height: var(--sg-size);40  }41  .sg-checkmark-pop svg {42    display: block;43    width: 100%;44    height: 100%;45    transform-origin: 50% 50%;46    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;47  }48  .sg-checkmark-pop-ring,49  .sg-checkmark-pop-check {50    fill: none;51    stroke: var(--sg-color);52    stroke-width: 4;53    stroke-linecap: round;54    stroke-linejoin: round;55    stroke-dasharray: 100;56    stroke-dashoffset: 100;57    animation: sg-checkmark-pop-draw var(--sg-duration) ease-out forwards;58  }59  .sg-checkmark-pop-check {60    animation-duration: calc(var(--sg-duration) * 0.6);61    animation-delay: calc(var(--sg-duration) * 0.5);62  }63  @keyframes sg-checkmark-pop-draw {64    to { stroke-dashoffset: 0; }65  }66  @keyframes sg-checkmark-pop-scale {67    0%   { transform: scale(0.85); }68    100% { transform: scale(1); }69  }70</style>71