[Hambureger menu SVG] #css

index.html

<button class="btn btn__toggle">
  <svg class="ham" viewBox="0 0 100 100" onclick="this.classList.toggle('active')">
    <path class="ham__line top" d="m 70,33 h -40 c 0,0 -6,1.368796 -6,8.5 0,7.131204 6,8.5013 6,8.5013 l 20,-0.0013" />
    <path class="ham__line middle" d="m 70,50 h -40" />
    <path class="ham__line bottom" d="m 69.575405,67.073826 h -40 c -5.592752,0 -6.873604,-9.348582 1.371031,-9.348582 8.244634,0 19.053564,21.797129 19.053564,12.274756 l 0,-40" />
  </svg>
</button>

style.scss

.ham {
   cursor: pointer;
   transition: transform 400ms;
   user-select: none;
   width: 56px;
   &__line {
      fill: none;
      transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
      stroke: #000;
      stroke-width: 5.5;
      stroke-linecap: round;
   }
   .top {
      stroke-dasharray: 40 82;
   }
   .middle {
      stroke-dasharray: 40 111;
   }
   .bottom {
      stroke-dasharray: 40 161;
   }
   &.active {
      transform: rotate(45deg);
      .top {
         stroke-dasharray: 17 82;
         stroke-dashoffset: -62px;
      }
      .middle {
         stroke-dashoffset: 23px;
      }
      .bottom {
         stroke-dashoffset: -83px;
      }
   }
}