Isometric Toggle Switch
An isometric switch slides its grip block along the track with a spring and settles on, lighting an accent groove, then slides back off. Hairline SVG boxes moved by CSS translate.
Also known as: isometric toggle switch, 3d toggle animation, hairline isometric.
HTML
<div class="hln-iso-toggle" role="img" aria-label="A switch turning on and off"> <svg viewBox="-110 -60 220 120" aria-hidden="true"><g transform="translate(0 4) scale(1.9)"><g><polygon points="-27,-6.5 13,13.5 13,8.5 -27,-11.5"/><polygon points="27,6.5 13,13.5 13,8.5 27,1.5"/><polygon points="-13,-18.5 27,1.5 13,8.5 -27,-11.5"/></g><polygon class="hln-iso-toggle-in" points="-14,-14 18,2 14,4 -18,-12"/><polygon class="hln-iso-toggle-groove" points="-14,-14 18,2 14,4 -18,-12"/><g class="hln-iso-toggle-knob"><g><polygon points="-24,-11 -12,-5 -12,-13 -24,-19"/><polygon points="0,-11 -12,-5 -12,-13 0,-19"/><polygon points="-12,-25 0,-19 -12,-13 -24,-19"/></g><line class="hln-iso-toggle-in" x1="-12.5" y1="-22.25" x2="-18.5" y2="-19.25"/><line class="hln-iso-toggle-in" x1="-9" y1="-20.5" x2="-15" y2="-17.5"/><line class="hln-iso-toggle-in" x1="-5.5" y1="-18.75" x2="-11.5" y2="-15.75"/></g></g></svg> </div>
CSS
.hln-iso-toggle {
--c: var(--hln-color, #ff4f2e);
font-size: var(--hln-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 22em;
height: 12em;
border-radius: 0.75em;
background: #f6f5f1;
overflow: hidden;
--u: 1px;
}
.hln-iso-toggle svg {
width: 100%;
height: 100%;
overflow: visible;
fill: #ffffff;
stroke: #1c1d21;
stroke-width: 1.25;
stroke-linejoin: round;
stroke-linecap: round;
}
.hln-iso-toggle svg * {
vector-effect: non-scaling-stroke;
}
.hln-iso-toggle .hln-iso-toggle-in {
stroke: #9a9ca3;
}
.hln-iso-toggle .hln-iso-toggle-groove {
fill: var(--c);
stroke: var(--c);
opacity: 0;
animation: hln-iso-toggle-on 4.4s infinite;
}
.hln-iso-toggle .hln-iso-toggle-knob {
animation: hln-iso-toggle-knob 4.4s infinite;
}
@keyframes hln-iso-toggle-knob {
0% { translate: 0 0; }
10% { translate: 0 0; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
21% { translate: calc(25.92 * var(--u)) calc(12.96 * var(--u)); animation-timing-function: ease-in-out; }
26% { translate: calc(23.52 * var(--u)) calc(11.76 * var(--u)); animation-timing-function: ease-in-out; }
30% { translate: calc(24 * var(--u)) calc(12 * var(--u)); }
60% { translate: calc(24 * var(--u)) calc(12 * var(--u)); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
71% { translate: calc(-1.92 * var(--u)) calc(-0.96 * var(--u)); animation-timing-function: ease-in-out; }
76% { translate: calc(0.48 * var(--u)) calc(0.24 * var(--u)); animation-timing-function: ease-in-out; }
80% { translate: 0 0; }
100% { translate: 0 0; }
}
@keyframes hln-iso-toggle-on {
0%, 16% { opacity: 0; }
24%, 60% { opacity: 1; }
66%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hln-iso-toggle * {
animation: none !important;
}
.hln-iso-toggle .hln-iso-toggle-knob { translate: calc(24 * var(--u)) calc(12 * var(--u)); }
.hln-iso-toggle .hln-iso-toggle-groove { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hln-iso-toggle, .hln-iso-toggle *, .hln-iso-toggle::before, .hln-iso-toggle::after, .hln-iso-toggle *::before, .hln-iso-toggle *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hln-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hln-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.