JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
    <style type="text/css">
        .st0 {
            stroke:#000000;
            stroke-miterlimit:10;
        }
        .st1 {
            fill:#FFDE17;
        }
        .st2 {
            fill:none;
            stroke:#000000;
            stroke-miterlimit:10;
        }
        .st3 {
            fill:none;
            stroke:#000000;
            stroke-miterlimit:10;
            stroke-dasharray:0.9795, 0.9795;
        }
    </style>
    <path id="XMLID_9_" class="st0" d="M50,15.3H8.4c-2.8,0-5,2.3-5,5v58c0,2.8,2.3,5,5,5H50c2.8,0,5-2.3,5-5v-58
			C55,17.6,52.8,15.3,50,15.3z M14,19.4h28.1c0.9,0,1.6,0.7,1.6,1.6s-0.7,1.6-1.6,1.6H14c-0.9,0-1.6-0.7-1.6-1.6S13.1,19.4,14,19.4z
			 M28.8,82.8c-1.6,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3S30.4,82.8,28.8,82.8z M48.9,69.2c0,2.8-2.3,5-5,5H13.7c-2.8,0-5-2.3-5-5V32
			c0-2.8,2.3-5,5-5h30.3c2.8,0,5,2.3,5,5V69.2z" />
    <path id="XMLID_4_" class="st1" d="M23,48.8h10.2V45c0-1.4-0.5-2.6-1.5-3.6s-2.2-1.5-3.6-1.5c-1.4,0-2.6,0.5-3.6,1.5
			c-1,1-1.5,2.2-1.5,3.6V48.8L23,48.8z M39.5,50.7v11.4c0,0.5-0.2,1-0.6,1.3c-0.4,0.4-0.8,0.6-1.3,0.6h-19c-0.5,0-1-0.2-1.3-0.6
			c-0.4-0.4-0.6-0.8-0.6-1.3V50.7c0-0.5,0.2-1,0.6-1.3s0.8-0.6,1.3-0.6h0.6V45c0-2.4,0.9-4.5,2.6-6.3c1.7-1.7,3.8-2.6,6.3-2.6
			s4.5,0.9,6.3,2.6s2.6,3.8,2.6,6.3v3.8h0.6c0.5,0,1,0.2,1.3,0.6C39.3,49.7,39.5,50.1,39.5,50.7L39.5,50.7z" />
    <g id="dotted-lines">
        <g id="XMLID_20_">
            <path id="XMLID_23_" class="st2" d="M58.4,59.6c0,0,0.1-0.2,0.3-0.4" />
            <path id="XMLID_22_" class="st3" d="M59.2,58.4c3.1-4.6,15.5-20.1,37-15.4" />
            <path id="XMLID_21_" class="st2" d="M96.7,43.1c0.2,0,0.3,0.1,0.5,0.1" />
        </g>
    </g>
    <polyline id="XMLID_3_" class="st2" points="97.3,40.8 99,44.2 96.3,46.4 " />
</svg>

CSS

svg {
    height: 600px;
}

JavaScript

$(function () {


    $("#dotted-lines path").css({
        'fill': 'none'
    });

    var length;

    $("#dotted-lines path").each(function () {

        var $this = $(this);
        length = $this[0].getTotalLength();
        $this.attr('data-length', length).css({
            'stroke-dashoffset': length,
                'stroke-dasharray': length
        });


    });


    $("#dotted-lines path").each(function () {


        $(this).animate({
            'stroke-dashoffset': 0
        }, {

            duration: 1000,
            easing: 'linear',
            complete: function () {

            }
        });

    });

});