JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 160" width="47.5" height="40">
  <defs>
    <style>
      .check-mark-1 {
        fill: none;
        stroke: green;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 21px;
        stroke-dasharray: 259.366;
        stroke-dashoffset: -259.366;
      }
    </style>
  </defs>
  <path class="check-mark-1" d="M179.61,28.47l-119,119.08L11.05,97.91"/>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 160" width="47.5" height="40">
  <defs>
    <style>
      .check-mark-2 {
        fill: none;
        stroke: red;
        stroke-width: 21px;
        stroke-linecap: round;
        stroke-dasharray: 259.366;
        stroke-dashoffset: -259.366;
      }
    </style>
    <clipPath id="clip-path">
      <path d="M53.18,155a10.54,10.54,0,0,0,14.93,0L186.72,36.21a10.56,10.56,0,0,0-14.94-14.92L60.65,132.55,18.4,90.26A10.56,10.56,0,1,0,3.46,105.18Z"/>
    </clipPath>
  </defs>

  <path class="check-mark-2" d="M179.61,28.47l-119,119.08L11.05,97.91" clip-path="url(#clip-path)"/>
</svg>

CSS

.check-mark-1, .check-mark-2 {
  animation: anim 1000ms forwards;
}

@keyframes anim {
  0% {
    stroke-dashoffset: -259.366;
  }

  100% {
    stroke-dashoffset: 0;
  }
}