JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<svg class="mainCloud" 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 555 452" style="enable-background:new 0 0 555 452;" xml:space="preserve">
                      <defs><path class="st0 cloudLine " stroke="red" d="M394.2,447.4c85.2,0,154.3-69.1,154.3-154.3c0-73.9-52-135.7-121.5-150.8c0-0.2,0-0.4,0-0.6
                      	C427,66.9,366.3,6.1,291.3,6.1c-48.9,0-91.7,25.8-115.6,64.6c-5.9-1.2-12.1-1.8-18.3-1.8c-52.9,0-95.7,42.8-95.7,95.7
                      	c0,9.4,1.4,18.5,3.9,27.1C30.3,217.5,7.3,259.1,7.3,306.1c0,78,63.3,141.3,141.3,141.3H394.2z" id="cloudLine"></path></defs><g><g><g><g><use xlink:href="#cloudLine" opacity="1" fill-opacity="0" stroke="red" stroke-width="6" stroke-opacity="1"></use></g></g></g></g>
                      </svg>

CSS

path {
  stroke-dasharray: 20;
 fill:red;
  animation: dash 0.5s linear normal  infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 100;
    stroke:#000;
  }
  to {
    stroke-dashoffset: 10;
    stroke:red;

  }
}