<div class="lab-container">
<svg class="nav-icon" viewBox="0 0 100 100">
<line id="top" x1="10" y1="20" x2="90" y2="20"/>
<line id="mid" x1="10" y1="50" x2="90" y2="50"/>
<line id="bot" x1="10" y1="80" x2="90" y2="80"/>
</svg>
</div>
.nav-icon {
--icon-size: 64px;
--stroke-width: 8px;
--speed: 0.2s;
height: var(--icon-size);
aspect-ratio: 1 / 1;
cursor: pointer;
stroke: var(--stroke-color, #fff);
stroke-width: var(--stroke-width);
stroke-linecap: round;
transition: transform var(--speed) ease-in-out;
}
.nav-icon line {
transform-box: fill-box;
transform-origin: center;
transition: all var(--speed, 0.2s) ease-in-out;
}
.nav-icon:hover #top,
.nav-icon.is-active #top {
transform: translateY(30px) rotate(135deg);
}
.nav-icon:hover #bot,
.nav-icon.is-active #bot {
transform: translateY(-30px) rotate(-135deg);
}
.nav-icon:hover #mid,
.nav-icon.is-active #mid {
transform: scale(0);
}
.lab-container {
min-height: 100dvh;
display: grid;
place-items: center;
}
document.querySelector('.nav-icon')?.addEventListener('click', function () {
this.classList.toggle('is-active');
const toggleInput = document.getElementById('setting-active');
if (toggleInput) {
toggleInput.checked = this.classList.contains('is-active');
}
});