Animated Success Checkmark

<button class="ck-btn" id="ckBtn">Submit</button>
<div class="ck" id="ck" hidden><svg viewBox="0 0 52 52"><circle class="ck-c" cx="26" cy="26" r="24"/><path class="ck-p" d="M14 27l8 8 16-17"/></svg></div>

body{background:#f6f7fa}
.ck-btn{font:700 15px/1 system-ui,sans-serif;color:#fff;background:#16a34a;border:0;border-radius:12px;padding:14px 30px;cursor:pointer}
.ck svg{width:90px;height:90px}
.ck-c{fill:none;stroke:#16a34a;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:dc .5s ease forwards}
.ck-p{fill:none;stroke:#16a34a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:dp .35s .45s ease forwards}
@keyframes dc{to{stroke-dashoffset:0}}@keyframes dp{to{stroke-dashoffset:0}}

document.getElementById('ckBtn').onclick=function(){this.hidden=true;var c=document.getElementById('ck');c.hidden=false;c.innerHTML=c.innerHTML;};