Menu ⇄ X morph

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/hover/icon-morph-menu.html
  Desc   : Hamburger menu morphing into an X on hover
  ============================================================
-->
<button class="sg-icon-morph-menu" type="button" aria-label="Menu" style="--sg-color:#7F77DD; --sg-size:48px; --sg-duration:0.3s;">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <line class="sg-icon-morph-menu-top" x1="4" y1="7" x2="20" y2="7" />
    <line class="sg-icon-morph-menu-mid" x1="4" y1="12" x2="20" y2="12" />
    <line class="sg-icon-morph-menu-bot" x1="4" y1="17" x2="20" y2="17" />
  </svg>
</button>
<style>
  .sg-icon-morph-menu {
    appearance: none;
    border: 1px solid var(--sg-color);
    border-radius: 10px;
    padding: 0;
    background: transparent;
    cursor: pointer;
    width: var(--sg-size);
    height: var(--sg-size);
    display: inline-grid;
    place-items: center;
  }
  .sg-icon-morph-menu svg {
    width: 70%;
    height: 70%;
  }
  .sg-icon-morph-menu line {
    stroke: var(--sg-color);
    stroke-width: 2.4;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--sg-duration) ease, opacity var(--sg-duration) ease;
  }
  .sg-icon-morph-menu:hover .sg-icon-morph-menu-top,
  .sg-icon-morph-menu:focus-visible .sg-icon-morph-menu-top {
    transform: translateY(5px) rotate(45deg);
  }
  .sg-icon-morph-menu:hover .sg-icon-morph-menu-bot,
  .sg-icon-morph-menu:focus-visible .sg-icon-morph-menu-bot {
    transform: translateY(-5px) rotate(-45deg);
  }
  .sg-icon-morph-menu:hover .sg-icon-morph-menu-mid,
  .sg-icon-morph-menu:focus-visible .sg-icon-morph-menu-mid {
    transform: scaleX(0.1);
    opacity: 0;
  }
</style>