<div class="site-container">
  <svg xmlns="http://www.w3.org/2000/svg" class="hamburger-icon" width="64" height="64" viewBox="0 0 48 48">
    <rect class="top" x="0" y="0" rx="4" ry="4" width="100%" height="8" />
    <rect class="middle" x="0" y="20" rx="4" ry="4" width="100%" height="8" />
    <rect class="bottom" x="0" y="40" rx="4" ry="4" width="100%" height="8" />
  </svg>
  <p>Hover to animate</p>
</div>
:root {
  --icon-body-bg-color: #2f3542;
  --icon-body-color: #747d8c;
  --icon-active-color: #2ed573;
  --icon-size: 48;
  --icon-bar-size: 8;
  --icon-translation-size: calc((var(--icon-size) - var(--icon-bar-size)) / 2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: 1em/160% sans-serif;
  background-color: var(--icon-body-bg-color);
  color: var(--icon-body-color);
}

svg {
  fill: currentColor;
  max-width: 100%;
  vertical-align: baseline;
}

.site-container {
  padding: 2em;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

#menu-icon {
  cursor: pointer;
}

.hamburger-icon {
  cursor: pointer;
}

.hamburger-icon rect {
  transition: all 0.3s ease-in-out;
}

.hamburger-icon:hover rect {
  fill: var(--icon-active-color);
}

.hamburger-icon:hover .top,
.hamburger-icon:hover .bottom {
  transform-origin: center;
}

.hamburger-icon:hover .top {
  transform: rotate(45deg)
    translate(0, calc(var(--icon-translation-size) * 1px));
}

.hamburger-icon:hover .bottom {
  transform: rotate(-45deg)
    translate(0, calc(var(--icon-translation-size) * -1px));
}

.hamburger-icon:hover .middle {
  opacity: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.