JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
   <symbol id="icon_success" viewBox="0 0 32 32">
          <path class="circle" fill="none" stroke="#0ab49d" stroke-width="1.6931" stroke-miterlimit="10" stroke-linecap="butt" stroke-linejoin="miter" style="stroke: var(--color1, #0ab49d)" d="M30.332 15.899c0 7.926-6.425 14.352-14.352 14.352s-14.352-6.425-14.352-14.352c0-7.926 6.425-14.352 14.352-14.352s14.352 6.426 14.352 14.352z"></path>
          <path class="tick" fill="none" stroke="#0ab49d" stroke-width="1.6931" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="miter" style="stroke: var(--color1, #0ab49d)" d="M22.283 10.111l-7.936 11.243-4.63-5.452"></path>
        </symbol>
        </defs>
  </svg>
    <div class="input-group mb-2 success-group">
    <svg class="icon progress"><use xlink:href="#icon_success"></use></svg>
    </div>
    <button>
    Animate
    </button>

CSS

.circle{
      opacity:1;
      stroke-dasharray: 150;
      stroke-dashoffset: 150;
      -webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
      -moz-transition: stroke-dashoffset 1s 0.5s ease-out;
      -ms-transition: stroke-dashoffset 1s 0.5s ease-out;
      -o-transition: stroke-dashoffset 1s 0.5s ease-out;
      transition: stroke-dashoffset 1s 0.5s ease-out;
    }
    
    .drawn svg .circle{
      opacity: 1;
      stroke-dashoffset: 0;
    }

JavaScript

$("button").click(function(){
    $(".success-group").toggleClass("drawn")
});