<div id="anime-demo">
  <svg width="600" height="300" viewBox="0 0 800 400">
    <path class="letter-m" d="M22,70l0,172l35,-1l-14,-108l29,45l46,-45l-36,158l52,1l20,-232l-52,22l-23,47l-18,-65Z" stroke="none" stroke-width="4" fill="none"/>
    <path class="letter-o" d="M193,157l-21,83l103,3l-7,-121l-66,36l-5,25l55,-29l1,63l-57,0Z" stroke="none" stroke-width="4" fill="none"/>
    <path class="letter-n"d="M312,129l-6,113l35,-1l-13,-72l44,72l32,0l21,-180l-98,6l55,121l-44,-64Z" stroke="none" stroke-width="4" fill="none"/>
    <path class="letter-t" d="M492,154l-19,85l47,-1l-9,-98l51,7l0,-37l-50,3l40,-71l-74,9l13,69l-33,-8l-18,55Z" stroke="none" stroke-width="4" fill="none"/>
    <path class="letter-y" d="M584.6226329803,149.6182594299l26,85l-44,111.99999999999997l45,1l12,-115.99999999999997l114,-159l-53,0l-52,114.00000000000003l-15,-67.00000000000001Z" stroke="none" stroke-width="4" fill="none"/>
  </svg>
</div>

<div class="controls">
  <button class="play-drawing">Write the Name</button>
</div>

body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

#anime-demo {
  position: relative;
}

svg {
   padding: 10px;
}

button {
  background: orange;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: blue;
}

var letterTime = 2000;

var lineDrawing = anime({
  targets: "path",
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: "easeInOutCubic",
  duration: letterTime,
  delay: function(el, i) {
    return letterTime * i;
  },
  begin: function(anim) {
    var letters = document.querySelectorAll("path"),
      i;

    for (i = 0; i < letters.length; ++i) {
      letters[i].setAttribute("stroke", "black");
      letters[i].setAttribute("fill", "none");
    }
  },
  update: function(anim) {
    if (anim.currentTime >= letterTime) {
      document.querySelector(".letter-m").setAttribute("fill", "#e91e63");
    }
    if (anim.currentTime >= 2 * letterTime) {
      document.querySelector(".letter-o").setAttribute("fill", "#3F51B5");
    }
    if (anim.currentTime >= 3 * letterTime) {
      document.querySelector(".letter-n").setAttribute("fill", "#8BC34A");
    }
    if (anim.currentTime >= 4 * letterTime) {
      document.querySelector(".letter-t").setAttribute("fill", "#FF5722");
    }
    if (anim.currentTime >= 5 * letterTime) {
      document.querySelector(".letter-y").setAttribute("fill", "#795548");
    }
  },
  autoplay: false
});

document.querySelector(".play-drawing").onclick = lineDrawing.restart;