JSFiddle - React, Tailwind, and code Playground

by greenhulk01

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineMax.min.js"></script>
<div id=”animation”>
    <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
        <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
        <g>
            <title>Layer 1</title>
            <path d="m107,215c1,-3 3.08566,-12.46716 7,-19c3.29107,-5.49261 9.31076,-14.47025 17,-25c9.21199,-12.61504 16.55954,-21.5379 25,-28c5.72569,-4.38365 10.38057,-8.7079 16,-13c12.81425,-9.78748 24.07481,-12.51962 32,-14c4.05301,-0.75708 6,-1 9,-1c5,0 9,0 12,0c5,0 14.09102,0.4354 22,2c11.185,2.21268 20.42023,3.10392 29,6c5.52469,1.86485 9.61716,4.12686 17,10c4.42694,3.52168 8.05432,8.93719 15,15c9.07169,7.91861 14.78638,13.17867 19,18c3.8371,4.39052 6.21167,8.71413 9,11c3.28101,2.68979 7.71899,7.31021 11,10c2.78833,2.28587 5.01291,3.83981 6,4c3.12143,0.50655 5.82376,1.48625 8,2c2.91974,0.68925 6.03748,0.61092 11,0c4.09222,-0.50377 9.37201,-1.3851 13,-4c3.4418,-2.48071 7.59286,-5.10626 14,-10c6.74332,-5.15051 12,-9 17,-14c4,-4 11.23273,-9.73325 17,-15c8.35431,-7.62927 13.38586,-11.32828 19,-15c6.53644,-4.27493 10,-8 13,-10c3,-2 7.54916,-4.95517 11,-6c0.95709,-0.28979 5.93796,-1.49829 12,-2c2.98978,-0.24744 4,0 6,0c2,0 5.98453,0.08074 11,1c5.98309,1.0966 11,2 12,2l1,0" id="svg_2" stroke-width="5" stroke="#000000" fill="none"></path>
        </g>
    </svg>
</div>

JavaScript

var svgContainer = $("#animation");
var nS = "http://www.w3.org/2000/svg";
var animation = new TimelineMax();
animation.pause();
var svgPaths = svgContainer.getElementsByTagNameNS(nS, "path");
for (var x = 0; x < svgPaths.length; x++) {
    var path = svgPaths[x];
    var pathDimensions = path.getTotalLength();
    var strokeWidth = path.getAttribute("stroke-width");
    path.style.strokeDasharray = (pathDimensions) + " " + (pathDimensions);
    path.style.strokeDashoffset = (/Firefox/i.test(navigator.userAgent)) ? pathDimensions / strokeWidth : pathDimensions;
    animation.add(TweenMax.to(path.style, 1, {
        strokeDashoffset: 0,
        onUpdate: function () {
            var n = document.createTextNode(' ');
            document.body.appendChild(n);
            document.body.removeChild(n);
        }
    }), (x > 0) ? "-=0.8" : "");
}
animation.play();