let drawSVG = function() {
let paths = document.getElementsByClassName("cls-1");
for (let i = 0; i < paths.length; i++) {
let path = paths[i];
let length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
  'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 10s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';
}
}

drawSVG();
/* From Modernizr */
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
}

for (t in transitions) {
if (el.style[t] !== undefined) {
  return transitions[t];
}
}
}
/* Listen for a transition! */
var transitionEvent = whichTransitionEvent();
var transitionDone = false;
transitionEvent && document.body.addEventListener(transitionEvent,
function() {
transitionDone = true;
document.body.className = "pointer";
});