$bar-color: #fff;


body, html {
  width: 100%;
  height: 100%;
  text-align: center;
  
  background: #349fce;
}

.back {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3D(-50%,-50%,0);
}

svg {
  width: 400px;
  height: 150px;
  padding: 5px;
  
  overflow: visible;
  cursor: pointer;
}

/*path*/.bar {
  fill: none;
  
  stroke-width: 10px;
  stroke-linecap: round;
  stroke: $bar-color;
  stroke-dasharray: 88px 600px;
  
  // easeOutQuad
  transition:  all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  
  &.top {
    stroke-dashoffset: -7px;
    transform: translateX(50%);
  }
  
  &.bottom {
    stroke-dashoffset: -315px;
    transform: translateX(-39%);
  }
 
  
  //Animation
  .anim &.top {
    stroke-dasharray: 50px 600px;
    stroke-dashoffset:-308px;
  }
  
  .anim &.bottom {
    stroke-dasharray: 50px 600px;
    stroke-dashoffset:-0px;
  }
}