Success checkmark draw

<svg viewBox="0 0 100 100" role="img" aria-label="Success">
  <circle class="fill" cx="50" cy="50" r="44" stroke="none"/>
  <circle class="ring" cx="50" cy="50" r="44" pathLength="1"/>
  <path class="tick" d="M30 52l14 14 27-30" pathLength="1"/>
</svg>

svg{width:140px;height:140px;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:5}
.ring{stroke:#f08a5d;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s cubic-bezier(.65,0,.35,1) forwards}
.tick{stroke:#f08a5d;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .45s .6s cubic-bezier(.65,0,.35,1) forwards}
.fill{fill:#f08a5d;opacity:0;transform-origin:center;transform:scale(.8);animation:fillin .4s .9s ease-out forwards}
.tick{animation-name:draw}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{opacity:.12;transform:none}}
@media (prefers-reduced-motion:reduce){.ring,.tick{animation:none;stroke-dashoffset:0}.fill{animation:none;opacity:.12;transform:none}}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Checkmark draw</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
svg{width:140px;height:140px;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:5}
.ring{stroke:#f08a5d;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s cubic-bezier(.65,0,.35,1) forwards}
.tick{stroke:#f08a5d;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .45s .6s cubic-bezier(.65,0,.35,1) forwards}
.fill{fill:#f08a5d;opacity:0;transform-origin:center;transform:scale(.8);animation:fillin .4s .9s ease-out forwards}
.tick{animation-name:draw}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{opacity:.12;transform:none}}
@media (prefers-reduced-motion:reduce){.ring,.tick{animation:none;stroke-dashoffset:0}.fill{animation:none;opacity:.12;transform:none}}
</style></head>
<body>
<svg viewBox="0 0 100 100" role="img" aria-label="Success">
  <circle class="fill" cx="50" cy="50" r="44" stroke="none"/>
  <circle class="ring" cx="50" cy="50" r="44" pathLength="1"/>
  <path class="tick" d="M30 52l14 14 27-30" pathLength="1"/>
</svg>
</body></html>