<div id="playPause">
<svg width="50%" viewBox="0 0 177.7 63.3" class="letters letters--effect-1">
  
<!-- C -->
  <g class="letter letter--1">
    <g class="letter__part">
      <path class="letter__layer color-1" d="M33,39.8c-1.2,7.4-4.2,12.4-11.7,12.4C10.8,52.2,9,42.1,9,29.7S10.8,7.2,21.3,7.2c7.4,0,10.5,5.1,11.7,12.4"/>
      <path class="letter__layer color-3" d="M33,39.8c-1.2,7.4-4.2,12.4-11.7,12.4C10.8,52.2,9,42.1,9,29.7S10.8,7.2,21.3,7.2c7.4,0,10.5,5.1,11.7,12.4"/>
       <path class="letter__layer color-2" d="M33,39.8c-1.2,7.4-4.2,12.4-11.7,12.4C10.8,52.2,9,42.1,9,29.7S10.8,7.2,21.3,7.2c7.4,0,10.5,5.1,11.7,12.4"/>
      </g>
  </g>
  
<!--  A -->
   <g class="letter letter--2">
     <g class="letter__part">
        <path class="letter__layer color-1" d="M43,45.3l17.7,0.5"/>
       <path class="letter__layer color-1" d="M39.7,56.8l13.1-45.5l10.6,46.2"/>
       
     </g>
     <g class="letter__part">
         <path class="letter__layer color-3" d="M43,45.3l17.7,0.5"/>
        <path class="letter__layer color-3" d="M39.7,56.8l13.1-45.5l10.6,46.2"/>
     </g>
      <g class="letter__part">
         <path class="letter__layer color-2" d="M43,45.3l17.7,0.5"/>
        <path class="letter__layer color-2" d="M39.7,56.8l13.1-45.5l10.6,46.2"/>
     </g>
     
  </g>
  
  
  
  
<!--  S -->
   <g class="letter letter--3">
     <g class="letter__part">
        <path class="letter__layer color-1" d="M123.9,23.9c0.6-3.3-1.3-12.3-10.1-12.6c-5.8-0.2-10.7,4.6-10.9,10.7c-0.3,8.8,7.2,10.4,10.2,11.4 c3,1,10.4,2.6,10.1,11.4c-0.2,6.1-5.1,10.9-10.9,10.7c-8.7-0.3-10.6-9.3-10.1-12.6"/>
        <path class="letter__layer color-3" d="M123.9,23.9c0.6-3.3-1.3-12.3-10.1-12.6c-5.8-0.2-10.7,4.6-10.9,10.7c-0.3,8.8,7.2,10.4,10.2,11.4 c3,1,10.4,2.6,10.1,11.4c-0.2,6.1-5.1,10.9-10.9,10.7c-8.7-0.3-10.6-9.3-10.1-12.6"/>
       <path class="letter__layer color-2" d="M123.9,23.9c0.6-3.3-1.3-12.3-10.1-12.6c-5.8-0.2-10.7,4.6-10.9,10.7c-0.3,8.8,7.2,10.4,10.2,11.4  c3,1,10.4,2.6,10.1,11.4c-0.2,6.1-5.1,10.9-10.9,10.7c-8.7-0.3-10.6-9.3-10.1-12.6"/>
     </g>
  </g>
  
  <!--  S -->
   <g class="letter letter--4">
     <g class="letter__part">
        <path class="letter__layer color-1" d="M91.2,20.9c0.2-3.1-2.4-11.3-10.5-10.7c-5.3,0.4-9.3,5.3-8.9,11c0.6,8.2,7.6,9,10.4,9.6 c2.8,0.6,9.8,1.4,10.4,9.6c0.4,5.7-3.6,10.7-8.9,11c-8,0.6-10.7-7.6-10.5-10.7"/>
       <path class="letter__layer color-3" d="M91.2,20.9c0.2-3.1-2.4-11.3-10.5-10.7c-5.3,0.4-9.3,5.3-8.9,11c0.6,8.2,7.6,9,10.4,9.6  c2.8,0.6,9.8,1.4,10.4,9.6c0.4,5.7-3.6,10.7-8.9,11c-8,0.6-10.7-7.6-10.5-10.7"/>
       <path class="letter__layer color-2" d="M91.2,20.9c0.2-3.1-2.4-11.3-10.5-10.7c-5.3,0.4-9.3,5.3-8.9,11c0.6,8.2,7.6,9,10.4,9.6  c2.8,0.6,9.8,1.4,10.4,9.6c0.4,5.7-3.6,10.7-8.9,11c-8,0.6-10.7-7.6-10.5-10.7"/>
     </g>
  </g>
  

<!--  I -->
  <g class="letter letter--5">
     <g class="letter__part">
        <path class="letter__layer color-1" d="M136.3,56.9l2.4-47.2"/>
        <path class="letter__layer color-3" d="M136.3,56.9l2.4-47.2"/>
        <path class="letter__layer color-2" d="M136.3,56.9l2.4-47.2"/>
      </g>
  </g> 

<!--  E -->
   <g class="letter letter--5">
     
     <g class="letter__part">
        <path class="letter__layer color-1" d="M152,33.2l13.4-0.5"/>
       <path class="letter__layer color-1" d="M171.3,53.8l-18.4,0.7L151.1,12l18.4-0.7"/>
       
     </g>
      <g class="letter__part">
        
        <path class="letter__layer color-3" d="M171.3,53.8l-18.4,0.7L151.1,12l18.4-0.7"/>
        <path class="letter__layer color-3" d="M152,33.2l13.4-0.5"/>
     </g>
     <g class="letter__part">
        
        <path class="letter__layer color-2" d="M171.3,53.8l-18.4,0.7L151.1,12l18.4-0.7"/>
        <path class="letter__layer color-2" d="M152,33.2l13.4-0.5"/>
     </g>
     
  </g>

 
 </svg> 
  

body {
   background-color: #2c2c2c;
}

.color-3{
  stroke:#05ffa1;
   transform: translate3d(2px, 2px, 0);
    stroke-width: 6px;
}

.color-1{
  stroke:#ffffff;
  stroke-width: 8px;
}

 .color-2{stroke:#01cdfe;
        transform: translate3d(2px, 2px, 0);
   stroke-width: 8px;
   z-index:9999;
}

/* Main SVG */

.letters {
  left: 50%;
  transform:translateX(-50%);
  position: relative;
  stroke-miterlimit:3;
  fill:none;
  top: 20px;
  display: block;
  min-height: 400px;
  max-height: 70vh;
  margin: 0 auto;
  position: absolute;
}

/* Letter path */

.letter__layer {
  fill: none;
}

var bounceIn = anime({
  targets: '.letter__part',
  translateY: {
        value: [-30, 0],
        duration: 900,
        delay: 1000,
        elasticity: 600,
        easing: 'easeOutElastic'
      },
      opacity: {
        value: [0, 1],
        duration: 300,
        easing: 'linear',
        delay: 1000
      }
  });

var lineDrawing = anime({
  targets: '.color-1',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeOutElastic',
  duration: 4000,
  delay: 1000,
  loop: false,
  direction: 'alternate',
});

var lineDrawing = anime({
  targets: '.color-3',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeOutElastic',
  duration: 4000,
  delay: 1200,
  loop: false,
  direction: 'alternate',
});

var lineDrawing = anime({
  targets: '.color-2',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeOutElastic',
  duration: 4000,
  delay: 1400,
  loop: false,
  direction: 'alternate',
});