Checkmark scale pop

The source

A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Checkmark — scale pop</title>
    <style>
      :root {
        /* Neutrals — fixed, never remixed. */
        --ivory: #faf9f5;
        --paper: #ffffff;
        --oat: #e3dacc;
        --slate: #141413;

        /* Knobs — the remix API. A knob exists iff declared here and used below. */
        --hue: 38.8;
        --lift: 0;
        --chroma: 1;
        --speed: 1;

        /* Accents — derived from the knobs with the family's offsets baked in,
           so one hue roll moves them together. Defaults reproduce the original hex. */
        --clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
        --clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
        --olive: oklch(
          calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
        );
        --rust: oklch(
          calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
        );

        /* Clock — every duration in the document runs off --t. */
        --cycle: 3.2s;
        --t: calc(var(--cycle) / var(--speed));
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: var(--ivory);
        font-family:
          system-ui,
          -apple-system,
          'Segoe UI',
          Roboto,
          sans-serif;
        color: var(--slate);
      }

      .badge {
        width: 88px;
        height: 88px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--olive);
        /* Never from scale(0) — the disc starts at 0.92 with a trace of opacity,
           so it grows into place instead of arriving from nowhere. 200ms with a
           2% overshoot: enough spring to feel like a stamp, not a bounce. */
        animation: badge-pop var(--t) infinite;
      }

      .badge svg {
        width: 40px;
        height: 40px;
        fill: none;
        stroke: var(--paper);
        stroke-width: 3.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        animation: tick-pop var(--t) infinite;
      }

      @keyframes badge-pop {
        0% {
          transform: scale(0.92);
          opacity: 0;
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        }
        5% {
          transform: scale(1.02);
          opacity: 1;
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        }
        9%,
        88% {
          transform: scale(1);
          opacity: 1;
        }
        95%,
        100% {
          transform: scale(1);
          opacity: 0;
        }
      }

      /* The tick lands a beat after the disc, so the two reads are sequential
         rather than one mush. */
      @keyframes tick-pop {
        0%,
        4% {
          transform: scale(0.9);
          opacity: 0;
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        }
        11%,
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .badge,
        .badge svg {
          animation-name: fade-cycle;
          transform: none;
        }

        @keyframes fade-cycle {
          0% {
            opacity: 0;
          }
          10%,
          88% {
            opacity: 1;
          }
          96%,
          100% {
            opacity: 0;
          }
        }
      }
    </style>
  </head>
  <body>
    <div class="badge">
      <svg viewBox="0 0 40 40" role="img" aria-label="Success">
        <path d="M11 20.5 L17.5 27 L29 13" />
      </svg>
    </div>
  </body>
</html>

The variant family

Same idea, one axis moved. Compare them side by side before you commit.