JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="svg-wrap">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 554.2 320.6" style="enable-background:new 0 0 554.2 320.6;" xml:space="preserve">
        <g id="Layer_2">
            <path class="st0" d="M40.2,167.2h237c0,0,1.8-124.4-118.9-124.4c-125,0-118.2,127.6-118.2,127.6s0.7,110.2,118.2,110.2   c121.1,0,118.9-119.1,118.9-119.1S279.6,40,395.2,40c119.2,0,118.2,119.9,118.2,119.9s9.5,120-118.2,120   c-116.5,0-118.5-115.2-118.5-115.2" />
        </g>
        <g id="Layer_3">
            <path class="st1" d="M163.6,236.2c118.8-3,21.8-144.2,158.5-226.2" />
            <path class="st1" d="M250.2,301c44.2-30.9,67.3-85.1,70.9-140.7" />
            <line class="st2" x1="468.2" y1="166.7" x2="554.2" y2="166.7" />
        </g>
    </svg>
</div>

CSS

body {
    background-color: #fff;
    margin-top: 100px;
}
.svg-wrap {
    max-width: 300px;
    margin: 0 auto;
}
.st0 {
    fill: rgba(0, 0, 0, 0);
    stroke: #00C6EA;
    stroke-width: 80;
    stroke-miterlimit: 10;
}
.st1 {
    fill: rgba(0, 0, 0, 0);
    stroke: #fff;
    stroke-width: 7;
    stroke-miterlimit: 10;
}
.st2 {
    fill: rgba(0, 0, 0, 0);
    stroke: #fff;
    stroke-width: 25;
    stroke-miterlimit: 10;
}

JavaScript

/**
 * EC SVG LOGO
 */
logoAnimation = function (d) {
    var _this = this;
    _this.d = d || 2000;
    _this.p = document.querySelectorAll('#Layer_2 path')[0];
    _this.i = document.querySelectorAll('#Layer_3 path')[0];

    _this.reset = function () {
        this.p.style.transition = this.p.style.WebkitTransition = 'none';
        this.i.style.transition = this.i.style.WebkitTransition = 'none';
        var pl = this.p.getTotalLength();
        var il = this.i.getTotalLength();
        this.p.style.strokeDasharray = pl + ' ' + pl;
        this.p.style.strokeDashoffset = pl;
        this.i.style.strokeDasharray = il + ' ' + il;
        this.i.style.strokeDashoffset = il;
        this.p.getBoundingClientRect();
        this.i.getBoundingClientRect();
        this.p.style.transition = this.p.style.WebkitTransition = 'stroke-dashoffset ' + this.d + 'ms ease-out';
        this.i.style.transition = this.i.style.WebkitTransition = 'stroke-dashoffset ' + (this.d / 7) + 'ms linear';
    }

    _this.run = function () {
        _this.reset();
        _this.p.style.strokeDashoffset = 0;
        setTimeout(function () {
            _this.i.style.strokeDashoffset = 0;
        }, (_this.d / 3));
    }
}

var l = new logoAnimation(2000);
l.reset();
setTimeout(l.run, 1000);