JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="anim-path">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve">
        <path fill="#ddd" stroke="deeppink" stroke-width="14" stroke-miterlimit="0"
  d="M11.6 269s-19.7-42.4 6.06-68.2 48.5-6.06 59.1 12.1l-3.03 28.8 209-227s45.5-21.2 60.6 1.52c15.2 22.7-3.03 47-3.03 47l-225 229s33.1-12 48.5 7.58c50 63.6-50 97-62.1 37.9"
/>
        <path fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M672,158c0,5.523-4.477,10-10,10h-82
    c-5.523,0-10-4.477-10-10V81c0-5.523,4.477-10,10-10h82c5.523,0,10,4.477,10,10V158z" />
        <path fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M452,293c0,0,0-61,72-44c0,0-47,117,81,57
    s5-110,10-67s-51,77.979-50,33.989" />
    </svg>
</div>

SCSS

.anim-path {
    max-width: 500px;
    svg {
        display: block;
        width: 100%;
    }
}
* {
    box-sizing: border-box;
}

JavaScript

/**
 * PATH TRANSITION
 */

function svgPathTransition(p) {
    var l = p.getTotalLength();
    p.style.transition = p.style.WebkitTransition = 'none';
    p.style.strokeDasharray = l + ' ' + l;
    p.style.strokeDashoffset = l;
    p.getBoundingClientRect();
    p.style.transition = p.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
    p.style.strokeDashoffset = '0';
}

var paths = document.querySelectorAll('.anim-path path');
for (i = 0; i < paths.length; i++) {
    new svgPathTransition(paths[i]);
}