JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div id="check"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="50px" class="checkmark"><path d="M21.6 2.7C19.7 1.6 17.4 1 15 1 7.3 1 1 7.3 1 15s6.3 14 14 14A14.04 14.04 0 0026.6 7.1L13.8 19.8 7 13" fill="none" stroke="#529c2d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"></path></svg></div>

CSS

.checkmark {
    border-radius: 50%;
    margin: 10px 0;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    transition: stroke-dashoffset 1s,box-shadow .7s .5s;
}

.animateSuccess .checkmark {
    stroke-dashoffset: 0;
    box-shadow: 0 0 0 3px #fff, 0 0 0 10px #72b94e;
}

JavaScript

setTimeout(function(){
var svg = document.getElementById('check');
svg.classList.add('animateSuccess');
}, 600);