Desk Lamp Switching On
A hairline isometric desk lamp swings its arm round the post on a spring, then switches on: dashed light lines drop and an accent pool lands on the desk. One @property angle drives arm and shade.
Also known as: claude hairline, isometric lamp animation, desk lamp css animation.
HTML
<div class="hln-desk-lamp" role="img" aria-label="A desk lamp swinging into place and switching on">
<svg viewBox="-110 -60 220 120" aria-hidden="true">
<g transform="translate(20.4 12.2) scale(1.04)">
<g class="hln-desk-lamp-light"><line class="hln-desk-lamp-l hln-desk-lamp-ray" x1="-40.02" y1="-23" x2="-44.97" y2="14"/><line class="hln-desk-lamp-l hln-desk-lamp-ray" x1="-15.98" y1="-23" x2="-11.03" y2="14"/><g transform="matrix(1 .5 -1 .5 -28 14)"><g class="hln-desk-lamp-pool"><circle class="hln-desk-lamp-a" cx="0" cy="0" r="12"/></g></g></g>
<g><path d="M-12.73,-2.6 V0 A12.73,6.36 0 0 0 12.73,0 V-2.6 Z"/><ellipse cx="0" cy="-2.6" rx="12.73" ry="6.36"/></g>
<polygon class="hln-desk-lamp-l" points="7,-1.1 7.18,-0.99 7.31,-0.87 7.39,-0.74 7.41,-0.6 7.39,-0.46 7.31,-0.33 7.18,-0.21 7,-0.1 5,0.9 4.79,0.99 4.54,1.05 4.28,1.09 4,1.11 3.72,1.09 3.46,1.05 3.21,0.99 3,0.9 2,0.4 1.82,0.29 1.69,0.17 1.61,0.04 1.59,-0.1 1.61,-0.24 1.69,-0.37 1.82,-0.49 2,-0.6 4,-1.6 4.21,-1.69 4.46,-1.75 4.72,-1.79 5,-1.81 5.28,-1.79 5.54,-1.75 5.79,-1.69 6,-1.6"/>
<g><path d="M-1.7,-45.8 V-2.6 A1.7,0.85 0 0 0 1.7,-2.6 V-45.8 Z"/><ellipse cx="0" cy="-45.8" rx="1.7" ry="0.85"/></g>
<g class="hln-desk-lamp-head"><polygon points="15.98,-23 16.02,-23.52 16.16,-24.04 16.39,-24.56 16.7,-25.06 17.11,-25.54 17.59,-26.01 25.06,-32.45 25.31,-32.63 25.6,-32.8 25.93,-32.95 26.3,-33.07 26.7,-33.17 27.12,-33.24 27.56,-33.28 28,-33.3 28.44,-33.28 28.88,-33.24 29.3,-33.17 29.7,-33.07 30.07,-32.95 30.4,-32.8 30.69,-32.63 30.94,-32.45 38.41,-26.01 38.89,-25.54 39.3,-25.06 39.61,-24.56 39.84,-24.04 39.98,-23.52 40.02,-23 39.98,-22.48 39.84,-21.96 39.61,-21.44 39.3,-20.94 38.89,-20.46 38.41,-19.99 37.85,-19.55 37.21,-19.14 36.5,-18.75 35.73,-18.4 34.89,-18.08 34.01,-17.79 33.08,-17.55 32.11,-17.35 31.11,-17.19 30.09,-17.08 29.05,-17.01 28,-16.99 26.95,-17.01 25.91,-17.08 24.89,-17.19 23.89,-17.35 22.92,-17.55 21.99,-17.79 21.11,-18.08 20.27,-18.4 19.5,-18.75 18.79,-19.14 18.15,-19.55 17.59,-19.99 17.11,-20.46 16.7,-20.94 16.39,-21.44 16.16,-21.96 16.02,-22.48"/><ellipse cx="28" cy="-31.6" rx="3.39" ry="1.7"/></g>
<g transform="matrix(1 .5 -1 .5 0 -46.4)"><g class="hln-desk-lamp-arm"><rect x="0" y="-1.2" width="29.2" height="2.4" rx="1.2"/></g></g>
<g><path d="M-3.11,-47.8 V-44.6 A3.11,1.56 0 0 0 3.11,-44.6 V-47.8 Z"/><ellipse cx="0" cy="-47.8" rx="3.11" ry="1.56"/></g>
</g>
</svg>
</div>CSS
.hln-desk-lamp {
--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;
}
.hln-desk-lamp svg {
width: 100%;
height: 100%;
overflow: visible;
fill: #ffffff;
stroke: #1c1d21;
stroke-width: 1.25;
stroke-linejoin: round;
stroke-linecap: round;
}
.hln-desk-lamp svg * {
vector-effect: non-scaling-stroke;
}
.hln-desk-lamp .hln-desk-lamp-l {
stroke: #9a9ca3;
}
.hln-desk-lamp .hln-desk-lamp-a {
stroke: var(--c);
}
@property --hln-desk-lamp-a {
syntax: "<angle>";
inherits: true;
initial-value: 90deg;
}
.hln-desk-lamp svg {
--hln-desk-lamp-a: 90deg;
animation: hln-desk-lamp-swing 6s infinite;
}
.hln-desk-lamp .hln-desk-lamp-arm {
transform: rotate(var(--hln-desk-lamp-a));
}
.hln-desk-lamp .hln-desk-lamp-head {
transform: matrix(1, 0, 0, 1, calc(28 * cos(var(--hln-desk-lamp-a)) - 28 - 28 * sin(var(--hln-desk-lamp-a))), calc(14 * cos(var(--hln-desk-lamp-a)) - 14 + 14 * sin(var(--hln-desk-lamp-a))));
}
.hln-desk-lamp .hln-desk-lamp-ray {
stroke-dasharray: 2 3;
}
.hln-desk-lamp .hln-desk-lamp-light {
animation: hln-desk-lamp-on 6s infinite;
}
.hln-desk-lamp .hln-desk-lamp-pool {
animation: hln-desk-lamp-pool 6s infinite;
}
@keyframes hln-desk-lamp-swing {
0% { --hln-desk-lamp-a: 0deg; }
8.33% { --hln-desk-lamp-a: 0deg; animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
30% { --hln-desk-lamp-a: 90deg; }
80% { --hln-desk-lamp-a: 90deg; animation-timing-function: cubic-bezier(.65,0,.35,1); }
95% { --hln-desk-lamp-a: 0deg; }
100% { --hln-desk-lamp-a: 0deg; }
}
@keyframes hln-desk-lamp-on {
0% { opacity: 0; }
31.67% { opacity: 0; }
32.67% { opacity: 1; }
75% { opacity: 1; }
76% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes hln-desk-lamp-pool {
0% { transform: scale(.4); }
31.67% { transform: scale(.4); animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
45% { transform: scale(1); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.hln-desk-lamp * {
animation: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.hln-desk-lamp, .hln-desk-lamp *, .hln-desk-lamp::before, .hln-desk-lamp::after, .hln-desk-lamp *::before, .hln-desk-lamp *::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.