JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

  <path class="path" style="display:none;" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
    s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>
    
  <path d="M0.792969 0.900146H595.928" class="path1" fill="white" stroke="#00A1E2" stroke-width="1" />
</svg>

CSS

.path {
  
  stroke-dasharray: 3;
  stroke-dashoffset: 50;
  animation: dash 5s linear infinite;
}

@keyframes dash {

  to {
    stroke-dashoffset: 0;
  }
}

.path1 {
  stroke-dasharray: 250;
  stroke-dashoffset: 500;
  animation: dash 1s linear infinite;
}

@keyframes dash1 {
  to {
    stroke-dashoffset: 0;
  }
}