JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="confirmed-ico">
						<circle r="37" cx="39" cy="41" fill="none" stroke="white" stroke-width="3"></circle>
						<path stroke="#72df19" stroke-width="1" fill="#72df19" d="M 12,38 L 38,64 L 87,14 L 74,1 L 38,37 L 25,24 z"></path>
					</svg>

CSS

body
{
  background: #333;
}

.confirmed-ico
{
      height: 81px;
      margin: 40px;
      position: absolute;
      width: 88px;
}

circle
{
        stroke-dasharray: 234;
        stroke-dashoffset: 234;
        animation: confirmed_circle .5s 1s ease-in-out forwards;
}

path
{
        stroke-dasharray: 220;
        stroke-dashoffset: 220;
        fill-opacity: 0;
        animation: confirmed_path .5s 1.5s ease-in-out forwards, 
                   confirmed_opacity .25s 2s ease-in-out forwards;
}

@keyframes confirmed_circle
{
  100%
  {
    stroke-dashoffset: 0;
  }
}

@keyframes confirmed_path
{
  100%
  {
    stroke-dashoffset: 440;
  }
}

@keyframes confirmed_opacity
 {
   100%
   {
     fill-opacity: 1;
   }
 }