JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<?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="955 -534 1920 1080" enable-background="new 955 -534 1920 1080" xml:space="preserve">
    <path id="A" d="M1438,266.5c25.3,0,50.2,0.2,74.5,0.5c24.3,0.3,39.2,0.7,44.5,1c5.3,0.3,12.3,0.2,21-0.5c1.3-0.7,2.3-1,3-1
	c8-16,16-44.7,24-86s14.7-68.3,20-81c1.3,0,11.2-0.5,29.5-1.5c18.3-1,29.2-0.2,32.5,2.5c6.7,14,15,41.5,25,82.5s17.3,67.8,22,80.5h1
	c50,10.7,94.7,12,134,4v-1l-75-350c-6-25.3-33.3-143.3-82-354c-25.3,2-47.7,3.3-67,4c-19.3,0.7-31.2,0.7-35.5,0
	c-4.3-0.7-11.2-0.3-20.5,1c-28,94.7-54,197.5-78,308.5s-42.3,203.2-55,276.5c-12.7,73.3-19.3,111-20,113
	C1436.6,266.2,1437.3,266.5,1438,266.5z M1645-208.5c3.3-13.3,6.7-19.7,10-19c8.7,1.3,21,71,37,209h-74
	C1634-137.8,1643-201.2,1645-208.5z" />
    <path id="b" d="M2028.5,245c19.7,0.7,37.2,0.8,52.5,0.5s29-1.2,41-2.5c0.7-0.7,1-3,1-7s0.2-9.2,0.5-15.5s0.5-12.2,0.5-17.5
	c4-8.7,7.3-10,10-4c17.3,34.7,48.3,49,93,43c21.3-1.3,40.3-5.5,57-12.5s30.7-15.2,42-24.5s21.2-21.7,29.5-37s14.8-29.8,19.5-43.5
	s8.5-31.2,11.5-52.5s5-39.5,6-54.5s1.8-34.2,2.5-57.5c0-50.7-6.5-94.7-19.5-132s-33.5-61-61.5-71c-36-12.7-76.3-16.8-121-12.5
	c-44.7,4.3-68.3,12.8-71,25.5l1.5-103.5c0.3-23,0.3-38,0-45s-1-16.7-2-29s-1.8-25.5-2.5-39.5v-11c0-1.3-7.3-2.5-22-3.5
	s-32.3-1.5-53-1.5c-20.7,0-37.7,1.3-51,4v66c0,55.3-1.5,157.3-4.5,306s-3.5,259-1.5,331C1995,244,2008.8,244.3,2028.5,245z
	 M2127.5-122.5c6.3-12.3,23.5-18.5,51.5-18.5c56,0,87.7,23.7,95,71c4.7,12.7,7,32,7,58c0,35.3-8.3,66-25,92s-38.7,39-66,39
	c-16.7,0-30-3.3-40-10s-17.2-17.3-21.5-32s-7.2-29.2-8.5-43.5s-2-34.2-2-59.5C2118-78,2121.1-110.2,2127.5-122.5z" />
</svg>
<br>
<br>
<button id="a_Btn">Animate A</button>
    <button id="b_Btn">Animate B</button>

CSS

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

JavaScript

//var path = document.querySelector('.squiggle-animated path');
var aPath = document.querySelector('#A');
var bPath = document.querySelector('#b');

var aLength = aPath.getTotalLength();
var bLength = bPath.getTotalLength();

// Clear any previous transition
aPath.style.transition = aPath.style.WebkitTransition = 'none';
bPath.style.transition = bPath.style.WebkitTransition = 'none';


// Set up the starting positions
aPath.style.strokeDasharray = aLength + ' ' + aLength;
aPath.style.strokeDashoffset = aLength;

bPath.style.strokeDasharray = bLength + ' ' + bLength;
bPath.style.strokeDashoffset = bLength;

// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
aPath.getBoundingClientRect();
bPath.getBoundingClientRect();



// Define our transition
aPath.style.transition = aPath.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
bPath.style.transition = bPath.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';


// Go!
aPath.style.strokeDashoffset = '0';




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

a_Btn.addEventListener('click', function () {
    aPath.style.strokeDashoffset = '0';
});

b_Btn.addEventListener('click', function () {
    bPath.style.strokeDashoffset = '0';
});