Swirling hamburger menu toggle

	<button id="menu-toggle">
    <svg height="50" width="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
      <g id="open-cubes">
        <g id="top-cubes">
          <rect x="12" y="19" width="2" height="2" />
          <rect x="12" y="21" width="2" height="2" />
  
          <rect x="14" y="19" width="2" height="2" />
          <rect x="14" y="21" width="2" height="2" />
  
          <rect x="16" y="19" width="2" height="2" />
          <rect x="16" y="21" width="2" height="2" />
  
          <rect x="18" y="19" width="2" height="2" />
          <rect x="18" y="21" width="2" height="2" />
  
          <rect x="20" y="19" width="2" height="2" />
          <rect x="20" y="21" width="2" height="2" />
  
          <rect x="22" y="19" width="2" height="2" />
          <rect x="22" y="21" width="2" height="2" />
  
          <rect x="24" y="19" width="2" height="2" />
          <rect x="24" y="21" width="2" height="2" />
  
          <rect x="26" y="19" width="2" height="2" />
          <rect x="26" y="21" width="2" height="2" />
  
          <rect x="28" y="19" width="2" height="2" />
          <rect x="28" y="21" width="2" height="2" />
  
          <rect x="30" y="19" width="2" height="2" />
          <rect x="30" y="21" width="2" height="2" />
  
          <rect x="32" y="19" width="2" height="2" />
          <rect x="32" y="21" width="2" height="2" />
  
          <rect x="34" y="19" width="2" height="2" />
          <rect x="34" y="21" width="2" height="2" />
  
          <rect x="36" y="19" width="2" height="2" />
          <rect x="36" y="21" width="2" height="2" />
        </g>
  
        <g id="bottom-cubes">
          <rect x="12" y="27" width="2" height="2" />
          <rect x="12" y="29" width="2" height="2" />
  
          <rect x="14" y="27" width="2" height="2" />
          <rect x="14" y="29" width="2" height="2" />
  
          <rect x="16" y="27" width="2" height="2" />
          <rect x="16" y="29" width="2" height="2" />
  
          <rect x="18" y="27" width="2" height="2" />
          <rect x="18" y="29" width="2" height="2" />
  
          <rect x="20" y="27" width="2" height="2" />
          <rect x="20" y="29" width="2" height="2" />
  
          <rect x="22" y="27" width="2" height="2" />
          <rect x="22" y="29" width="2" height="2" />
  
          <rect x="24" y="27" width="2" height="2" />
          <rect x="24" y="29" width="2" height="2" />
  
          <rect x="26" y="27" width="2" height="2" />
          <rect x="26" y="29" width="2" height="2" />
  
          <rect x="28" y="27" width="2" height="2" />
          <rect x="28" y="29" width="2" height="2" />
  
          <rect x="30" y="27" width="2" height="2" />
          <rect x="30" y="29" width="2" height="2" />
  
          <rect x="32" y="27" width="2" height="2" />
          <rect x="32" y="29" width="2" height="2" />
  
          <rect x="34" y="27" width="2" height="2" />
          <rect x="34" y="29" width="2" height="2" />
  
          <rect x="36" y="27" width="2" height="2" />
          <rect x="36" y="29" width="2" height="2" />
        </g>
      </g>
  
      <g id="close-cubes" transform="rotate(45, 25, 25)">
        <g id="vertical-cubes">
          <rect x="25" y="13" width="2" height="2" />
          <rect x="23" y="13" width="2" height="2" />
  
          <rect x="25" y="15" width="2" height="2" />
          <rect x="23" y="15" width="2" height="2" />
  
          <rect x="25" y="17" width="2" height="2" />
          <rect x="23" y="17" width="2" height="2" />
  
          <rect x="25" y="19" width="2" height="2" />
          <rect x="23" y="19" width="2" height="2" />
  
          <rect x="25" y="21" width="2" height="2" />
          <rect x="23" y="21" width="2" height="2" />
  
          <rect x="25" y="23" width="2" height="2" />
          <rect x="23" y="23" width="2" height="2" />
  
          <rect x="25" y="25" width="2" height="2" />
          <rect x="23" y="25" width="2" height="2" />
  
          <rect x="25" y="27" width="2" height="2" />
          <rect x="23" y="27" width="2" height="2" />
  
          <rect x="25" y="29" width="2" height="2" />
          <rect x="23" y="29" width="2" height="2" />
  
          <rect x="25" y="31" width="2" height="2" />
          <rect x="23" y="31" width="2" height="2" />
  
          <rect x="25" y="33" width="2" height="2" />
          <rect x="23" y="33" width="2" height="2" />
  
          <rect x="25" y="35" width="2" height="2" />
          <rect x="23" y="35" width="2" height="2" />
        </g>
  
        <g id="horizontal-cubes">
          <rect x="13" y="23" width="2" height="2" />
          <rect x="13" y="25" width="2" height="2" />
  
          <rect x="15" y="23" width="2" height="2" />
          <rect x="15" y="25" width="2" height="2" />
  
          <rect x="17" y="23" width="2" height="2" />
          <rect x="17" y="25" width="2" height="2" />
  
          <rect x="19" y="23" width="2" height="2" />
          <rect x="19" y="25" width="2" height="2" />
  
          <rect x="21" y="23" width="2" height="2" />
          <rect x="21" y="25" width="2" height="2" />
  
          <rect x="27" y="23" width="2" height="2" />
          <rect x="27" y="25" width="2" height="2" />
  
          <rect x="29" y="23" width="2" height="2" />
          <rect x="29" y="25" width="2" height="2" />
  
          <rect x="31" y="23" width="2" height="2" />
          <rect x="31" y="25" width="2" height="2" />
  
          <rect x="33" y="23" width="2" height="2" />
          <rect x="33" y="25" width="2" height="2" />
  
          <rect x="35" y="23" width="2" height="2" />
          <rect x="35" y="25" width="2" height="2" />
        </g>
      </g>
    </svg>
  </button>

html,
body {
  height: 100%;
}

body {
  align-items: center;
  background-color: #425ad1;
  background-image: linear-gradient(43deg, #425ad1 0%, #c851c0 46%, #ffcd70 100%);
  color: white;
  display: flex;
  font-family: "rift", sans-serif;
  font-size: 24px;
  font-weight: 600;
  justify-content: center;
}

button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  height: 50px;
  outline: none;
  position: relative;
  width: 50px;
}
button.active #open-cubes rect,
button.active #close-cubes rect {
  fill: #c851c0;
}
button svg {
  position: absolute;
  left: 0;
  top: 0;
}
button svg #open-cubes rect,
button svg #close-cubes rect {
  fill: #294bf5;
  transition: fill 600ms ease;
}
button svg #close-cubes rect {
  opacity: 0;
}

.spin-in {
  -webkit-animation: spin-in 1300ms ease 1 forwards 10ms;
          animation: spin-in 1300ms ease 1 forwards 10ms;
  transform-origin: center;
}

.spin-out {
  -webkit-animation: spin-out 1300ms ease 1 forwards 10ms;
          animation: spin-out 1300ms ease 1 forwards 10ms;
  transform-origin: center;
}

@-webkit-keyframes spin-in {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(720deg);
  }
}

@keyframes spin-in {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(720deg);
  }
}
@-webkit-keyframes spin-out {
  0% {
    opacity: 1;
    transform: rotate(720deg);
  }
  100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}
@keyframes spin-out {
  0% {
    opacity: 1;
    transform: rotate(720deg);
  }
  100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}

const button = document.getElementById("menu-toggle");
const openCubes = Array.from(document.querySelectorAll("#open-cubes rect"));
const closeCubes = Array.from(document.querySelectorAll("#close-cubes rect"));
let locked = false;

const openEffect = (cubes) => {
  cubes.forEach((element, index) => {
    setTimeout(() => {
      element.classList.remove("spin-in");
      element.classList.add("spin-out");
    }, index * 10);
  });
};

const closeEffect = (cubes) => {
  cubes.forEach((element, index) => {
    setTimeout(() => {
      element.classList.remove("spin-out");
      element.classList.add("spin-in");
    }, index * 10);
  });
};

button.addEventListener("click", (e) => {
  if (!locked) {
    locked = true;
    button.classList.toggle("active");
    const length = openCubes.length;

    if (button.classList.contains("active")) {
      openEffect(openCubes);
      closeEffect(closeCubes);
    } else {
      closeEffect(openCubes);
      openEffect(closeCubes);
    }

    setTimeout(() => {
      locked = false;
    }, 1300 + length * 10);
  }
});