JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

Animation with clipping path

<?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 51.8 62.4" enable-background="new 0 0 51.8 62.4" xml:space="preserve">
<g>
	<defs>
		<path id="SVGID_1_" d="M40.9,28c-1.7-0.4-3-0.6-3.8-0.6c-1.1,0-2,0.4-2.9,1.1c-1.1,0.9-1.6,2-1.6,3.4c0,1.1,1,3.2,2.9,6.3
			c2,3.1,2.9,6,2.9,8.6c0,3.8-1.4,6.9-4.3,9.3c-2.8,2.3-6.2,3.5-10.2,3.5c-3.7,0-6.5-0.3-8.3-0.8c-0.2-1-0.6-2.8-1.1-5.1
			c-0.3-1.3-0.8-3-1.3-5.1c2.5,0.6,4.2,0.9,5,0.9c3.4,0,5.1-1.3,5.1-3.9c0-1.9-0.7-3.5-2-5c-2.2-2-4.5-3.9-6.7-5.9
			c-4.3-3.8-6.5-8.4-6.5-13.6c0-5.5,2-9.6,6.1-12.5c3.6-2.5,8.3-3.7,14.3-3.7c3.4,0,7.1,0.5,11.3,1.5L40.9,28z"/>
	</defs>
	<clipPath id="SVGID_2_">
		<use xlink:href="#SVGID_1_"  overflow="visible"/>
	</clipPath>
	<path clip-path="url(#SVGID_2_)" fill="none" stroke="#000000" stroke-miterlimit="10" d="M5.4,54.2c2.9,0.2,5.9,0.4,8.8,0.6
		c3.1,0.2,6.3,0.4,9.3-0.5c5-1.5,8.9-6.9,7.7-12C29.7,36,21.9,33,20,26.8c-1-3.2,0-6.9,2.4-9.2c3.1-2.9,7.7-3.4,11.9-3.4
		c5.1,0,10.2,0.5,15.2,1.4"/>
</g>
</svg>
<br>
<br>
<button id="a_Btn">Animate S</button>

CSS

svg {
    width: 300px;
}

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

JavaScript

var paths = document.querySelectorAll('path');

var pathsLength = [];

for(var i=0;i<paths.length;i++){
    // init paths length
    pathsLength.push(paths[i].getTotalLength());
    
    // Clear any previous transition
    paths[i].style.transition = paths[i].style.WebkitTransition = 'none';
    
    // Set up the starting positions
    paths[i].style.strokeDasharray = pathsLength[i] + ' ' + pathsLength[i];
    paths[i].style.strokeDashoffset = pathsLength[i];
    
    // Trigger a layout so styles are calculated & the browser
    // picks up the starting position before animating
    paths[i].getBoundingClientRect();
    
    // Define our transition
    paths[i].style.transition = paths[i].style.WebkitTransition = 'stroke-dashoffset 1s ease-in-out';

    // Go!
    paths[i].style.strokeDashoffset = '0';
}




var a_Btn = document.getElementById('a_Btn');

a_Btn.addEventListener('click', function () {
    if(paths[1].style.strokeDashoffset != '0px'){      
        paths[1].style.strokeDashoffset = '0';
    } else {
        paths[1].style.strokeDashoffset = pathsLength[1];
    }
});