.trigger {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    border: 2px solid #fff;
    border-radius: 10px;
    transform: translateX(-100%) translateY(-70%);
}

.bars {
  width: 50px;
  cursor: pointer;
}
.bars .line {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: square;
  transition: stroke-dasharray 400ms,  stroke-dashoffset 400ms;
}
.bars .line.top {
  stroke-dasharray: 40 172;
}
.bars .line.middle {
  stroke-dasharray: 40 111;
}
.bars .line.bottom {
  stroke-dasharray: 40 172;
}
.bars.active .top {
  stroke-dashoffset: -132px;
}
.bars.active .middle {
  stroke-dashoffset: -71px;
}
.bars.active .bottom {
  stroke-dashoffset: -132px;
}