JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<svg version="1.1" id="burger-trigger" class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1330 1000" style="enable-background:new 0 0 1330 1000;" xml:space="preserve">
  <line class="st1" x1="1260" y1="500" x2="610.6" y2="500"/>
  <path class="st0" d="M1260,251.5l-649.4,0c0,0-663.9-28.2-525.7,464.3C215.6,1182,610.6,825.1,610.6,825.1L1260,175.6"/>
  <path class="st0" d="M1260,749.2l-649.4,0c0,0-663.9,28.2-525.7-464.3c130.8-466.1,525.7-109.2,525.7-109.2L1260,825.1"/>
</svg>

SCSS

#burger-trigger{
  $transition-duration: 450ms;
  $transition-timing: cubic-bezier(.72,.01,.45,.98);
  
  width: 120px;
  display: block;
  margin: 0 0 0 auto;
  overflow: visible;
  transform: translateX(-25%);
  cursor: pointer;
  transition: opacity $transition-duration $transition-timing;
  
  .st0,
  .st1{
    fill: none;
    stroke: #353535;
    stroke-width: 120;  
    stroke-miterlimit: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset $transition-duration $transition-timing, stroke-dasharray $transition-duration $transition-timing, stroke $transition-duration $transition-timing;
  }
  
  .st0{
    stroke-dasharray: 656, 9999;
    stroke-dashoffset: 0;
  }
  
  .st1{
    stroke-dasharray: 649.4;
    stroke-dashoffset: 0;
  }
  
  &:hover:not(.active){
    //opacity: 0.8;
    
    .st0,
    .st1{
      stroke: #006ea5;
    }
    
  }
  
  &.active{
    
    .st0,
    .st1{
      stroke: #00a2ff;
    }
    
    .st0{
      stroke-dasharray: 918, 9999;
      stroke-dashoffset: -2183;
    }
  
    .st1{
      stroke-dasharray: 0, 649.4;
      stroke-dashoffset: -324.7;
      transition: stroke-dashoffset ($transition-duration * 0.75) $transition-timing, stroke-dasharray ($transition-duration * 0.75) $transition-timing, stroke $transition-duration $transition-timing;
    }
    
  }
  
}

JavaScript

/**
 * Dynamic Burger Nav
 */
 
 var el = document.querySelector('#burger-trigger');
 
 el.addEventListener('click', function(){
 	
  if(el.classList.contains('active')){
  	
    el.classList.remove('active');
    
  }else{
  	
    el.classList.add('active');
    
  }
  
 });