SVG letters animation

CSS path animation on SVG letters

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="-241.1 -94.8 607.6 200" enable-background="new -241.1 -94.8 607.6 200" xml:space="preserve">
<g id="signs">
	<path id="_x7D_" d="M352.9-57.4c1.5,0.2,2.6-0.1,3.5-0.7c0.9-0.6,1.3-1.4,1.3-2.3c-0.1-0.5-0.1-1.1-0.1-1.7c0-0.6,0.1-1.2,0.3-1.7
		c0.2-0.5,0.5-1,0.9-1.3c0.5-0.3,1-0.5,1.7-0.5c0.1,0,0.2,0,0.2,0c0.1-0.7,0.1-1.6-0.1-2.8c-0.7,0.1-1.3,0-1.8-0.3s-0.8-0.6-1-1.1
		c-0.2-0.5-0.3-1-0.4-1.6c-0.1-0.6-0.1-1.2,0-1.8c0.1-0.8,0.1-1.5-0.3-2.1c-0.3-0.6-0.9-1-1.6-1.1c-1.1-0.1-2-0.1-2.7-0.1
		c-0.1,0.8-0.1,1.6,0,2.6c0.3,0.1,0.5,0.2,0.6,0.2c0.1,0.1,0.3,0.2,0.5,0.3s0.3,0.4,0.3,0.6c0,0.5,0.1,1.1,0.1,1.7s0,1.2,0,1.7
		c0,0.5,0.1,1,0.4,1.4c0.2,0.4,0.6,0.7,1.2,0.9c-1.1,0.6-1.6,1.8-1.5,3.6c0.1,1.9-0.4,3-1.6,3.1C352.9-58.5,352.9-57.5,352.9-57.4z"
		/>
	<path id="_x7E_" d="M-229.2-64c1.3,0,2.2,0,2.5,0.1v0c-0.2-1,0-1.7,0.6-2.1c0.4-0.2,0.9-0.3,1.3-0.3c0.6,0,1,0.3,1.4,0.8
		c0.4,0.8,1,1.4,1.9,1.7c0.9,0.3,1.7,0.3,2.6-0.1c0.6-0.2,1-0.5,1.5-1c1.2-1.7,1.6-3.2,1.3-4.6l-0.1-0.1c-1.7,0.1-2.7,0.1-3,0.1
		c-0.2,0.7-0.5,1.3-1.1,1.9c-0.5,0.6-1.1,0.6-1.7,0.1c-0.2-0.1-0.5-0.4-0.8-0.9c-0.3-0.4-0.7-0.8-0.9-0.9c-0.8-0.5-1.7-0.7-2.6-0.5
		s-1.7,0.6-2.4,1.2c-0.4,0.5-0.9,1.2-1.3,2.2c-0.4,1-0.7,1.9-0.9,2.5C-230.5-64-229.9-64-229.2-64z"/>
	<path id="_x5E_" d="M-206.8-63.9c0.1,0,0.4-0.3,0.9-0.8c0.5-0.5,0.8-0.8,1-0.9c0.1,0.1,0.4,0.4,0.9,0.9c0.5,0.5,0.8,0.8,0.9,0.8
		c0.8,0.1,1.5,0.1,2.1,0.1s1.1-0.1,1.4-0.2c0.4-0.1,0.6-0.1,0.6-0.1l-5.9-5.9c-0.3,0.3-0.8,0.8-1.5,1.4s-1.3,1.2-1.6,1.5
		c-0.4,0.4-0.8,0.8-1.3,1.4c-0.5,0.6-1,1.1-1.4,1.6C-208.2-63.9-206.9-63.9-206.8-63.9z"/>
	<path id="_x21_"...

CSS

body path {
    stroke: #000;
    stroke-width: 1;
    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 2s ease-in-out';

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




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

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