JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<!--

http://codepen.io/ghepting/pen/xnezB

-->


<div class="container"><div class="signature">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg 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 808 140" enable-background="new 0 0 808 140" xml:space="preserve">
         
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M22.3,30.5l27.8-3c0,0,7,59.5-11.2,61.3c-18.2,1.8-15.2-4.2-15.2-4.2"
	/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M142.5,27.5c0,0-8.1-4.7-15.5,0c-6.8,4.3-12.3,19.7-14.7,40.8
	c-2.3,21.2-7.7,22.5-7.7,22.5s-7.5,2-5.8-5.5c1.7-7.5,18.3,1.2,18.3,1.2s20.5,10,32.7,0c0,0,8.8-6.8,11.8-9.9c0-3.4,0-6.1,5.6-12.4"
	/>         
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M161.7,77.8c1.7,6.5,6.8,16.2,18,14.7c11.2-1.5,16.3-9.3,15.2-18.8
	c-1.2-9.5-12.2-16.1-16-14.6c-3.8,1.5-5.7,11.5-0.7,15.5s13.7,12.5,28,8.8c14.3-3.7,16.8-13.2,19-15.3c1.8,5.5,9.8,25.2,23,28.3
	c8.5-6.8,10.7-10.3,12.8-24c-1.2-10.7-11.5-14.9-14.3-13.5c-2.8,1.4-4,10.5,1.7,17.4c5.7,6.8,15.8,9.8,23.5,7.7
	c7.7-2.2,10.8-7.5,12.7-8c1.8,0.8,15.3,2.7,20.5-2c5.2-4.7,9-9.8,0.8-14.2c-8.2-4.3-24.7,12.5-23,22.5c1.7,10,17,11,23.8,9.7
	c6.7-1.3,21.2-14.2,22.8-17"/>

<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M362.8,30c0,0,2,29.3,16.8,28.8c14.8-0.5,19.8-8.1,22.7-16.1
	c2.8-8,3.8-9.3,1.3-10.3c-2.5-1-12.3,14.7-13.8,22s-8.5,33.7-7.8,35"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10"...

CSS

body path {
    stroke: #000;
    stroke-width: 2;
    fill: none;
}

JavaScript

(function () {
    window.signature = {
        initialize: function () {
            return $('.signature svg').each(function () {
                var delay, i, len, length, path, paths, previousStrokeLength, results, speed;
                paths = $('path, circle, rect', this);
                delay = 0;
                results = [];
                for (i = 0, len = paths.length; i < len; i++) {

                    path = paths[i];
                    length = path.getTotalLength();
                    previousStrokeLength = speed || 0;
                    speed = length < 40 ? 20 : Math.floor(length);
                    delay += previousStrokeLength + 100;
                    results.push($(path).css('transition', 'none').attr('data-length', length).attr('data-speed', speed).attr('data-delay', delay).attr('stroke-dashoffset', length).attr('stroke-dasharray', length + ',' + length));
                }
     
                return results;
            });
        },
        animate: function () {
            return $('.signature svg').each(function () {
                var delay, i, len, length, path, paths, results, speed;
                paths = $('path, circle, rect', this);
                results = [];
                for (i = 0, len = paths.length; i < len; i++) {

                    path = paths[i];
                    length = $(path).attr('data-length');
                    speed = $(path).attr('data-speed');
                    delay = $(path).attr('data-delay');
                    results.push($(path).css('transition', 'stroke-dashoffset ' + speed + 'ms ' + delay + 'ms linear').attr('stroke-dashoffset', '0'));
                }

                return results;
            });
        }
    };
    
    $(document).ready(function () {
        
        window.signature.initialize();
        
        setTimeout(function () {
                return window.signature.animate();
            }, 500);

        $('button').on('click', function () {
        ...