Turntable Tonearm Drop
An isometric hairline turntable: the tonearm swings over the spinning record on a spring and lowers into the groove, with the headshell as the accent. Platter and arm turn in the top-face plane.
Also known as: hairline skill, isometric turntable animation, record player css animation.
HTML
<div class="hln-turntable-arm" role="img" aria-label="A turntable arm swinging onto a record">
<svg viewBox="-110 -60 220 120" aria-hidden="true">
<g transform="translate(-6.6 -29.2) scale(1.1)">
<g><polygon points="-52.24,20 -52.16,19.59 -51.92,19.19 -51.53,18.82 -51,18.5 -3,-5.5 -2.36,-5.76 -1.62,-5.96 -0.83,-6.08 0,-6.12 0.83,-6.08 1.62,-5.96 2.36,-5.76 3,-5.5 63,24.5 63.53,24.82 63.92,25.19 64.16,25.59 64.24,26 64.24,33 64.16,33.41 63.92,33.81 63.53,34.18 63,34.5 15,58.5 14.36,58.76 13.62,58.96 12.83,59.08 12,59.12 11.17,59.08 10.38,58.96 9.64,58.76 9,58.5 -51,28.5 -51.53,28.18 -51.92,27.81 -52.16,27.41 -52.24,27"/><polygon points="63,24.5 63.53,24.82 63.92,25.19 64.16,25.59 64.24,26 64.16,26.41 63.92,26.81 63.53,27.18 63,27.5 15,51.5 14.36,51.76 13.62,51.96 12.83,52.08 12,52.12 11.17,52.08 10.38,51.96 9.64,51.76 9,51.5 -51,21.5 -51.53,21.18 -51.92,20.81 -52.16,20.41 -52.24,20 -52.16,19.59 -51.92,19.19 -51.53,18.82 -51,18.5 -3,-5.5 -2.36,-5.76 -1.62,-5.96 -0.83,-6.08 0,-6.12 0.83,-6.08 1.62,-5.96 2.36,-5.76 3,-5.5"/></g>
<g><path d="M-45.11,18.4 V20 A3.11,1.56 0 0 0 -38.89,20 V18.4 Z"/><ellipse cx="-42" cy="18.4" rx="3.11" ry="1.56"/></g>
<g><path d="M-39.11,21.4 V23 A3.11,1.56 0 0 0 -32.89,23 V21.4 Z"/><ellipse cx="-36" cy="21.4" rx="3.11" ry="1.56"/></g>
<g><path d="M-31.11,16 V19 A31.11,15.56 0 0 0 31.11,19 V16 Z"/><ellipse cx="0" cy="16" rx="31.11" ry="15.56"/></g>
<g><path d="M-29.7,15.2 V16 A29.7,14.85 0 0 0 29.7,16 V15.2 Z"/><ellipse cx="0" cy="15.2" rx="29.7" ry="14.85"/></g>
<g transform="matrix(1 .5 -1 .5 0 15.2)"><circle class="hln-turntable-arm-l" cx="0" cy="0" r="18"/><circle class="hln-turntable-arm-l" cx="0" cy="0" r="15.5"/><circle class="hln-turntable-arm-l" cx="0" cy="0" r="13"/><circle class="hln-turntable-arm-l" cx="0" cy="0" r="10.5"/><g class="hln-turntable-arm-spin"><circle cx="0" cy="0" r="6.5"/><line x1="2" y1="0" x2="5.2" y2="0"/><circle cx="0" cy="0" r="0.8"/></g></g>
<g><path d="M10.02,37.6 V43 A1.98,0.99 0 0 0 13.98,43 V37.6 Z"/><ellipse cx="12" cy="37.6" rx="1.98" ry="0.99"/></g>
<g><path d="M37.64,22 V27 A6.36,3.18 0 0 0 50.36,27 V22 Z"/><ellipse cx="44" cy="22" rx="6.36" ry="3.18"/></g>
<g class="hln-turntable-arm-cue"><g transform="matrix(1 .5 -1 .5 44 20.4)"><g class="hln-turntable-arm-arm"><rect x="-0.8" y="-2" width="1.6" height="36" rx="0.8"/><rect x="-2.8" y="-9" width="5.6" height="5" rx="1"/><rect class="hln-turntable-arm-a" x="-2.4" y="32" width="4.8" height="5.4" rx="1"/></g></g></g>
<g><path d="M40.89,19.2 V22 A3.11,1.56 0 0 0 47.11,22 V19.2 Z"/><ellipse cx="44" cy="19.2" rx="3.11" ry="1.56"/></g>
</g>
</svg>
</div>CSS
.hln-turntable-arm {
--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-turntable-arm svg {
width: 100%;
height: 100%;
overflow: visible;
fill: #ffffff;
stroke: #1c1d21;
stroke-width: 1.25;
stroke-linejoin: round;
stroke-linecap: round;
}
.hln-turntable-arm svg * {
vector-effect: non-scaling-stroke;
}
.hln-turntable-arm .hln-turntable-arm-l {
stroke: #9a9ca3;
}
.hln-turntable-arm .hln-turntable-arm-a {
stroke: var(--c);
}
.hln-turntable-arm .hln-turntable-arm-spin {
animation: hln-turntable-arm-spin 1.8s linear infinite;
}
.hln-turntable-arm .hln-turntable-arm-arm {
transform: rotate(28deg);
animation: hln-turntable-arm-arm 6s infinite;
}
.hln-turntable-arm .hln-turntable-arm-cue {
transform: matrix(1, 0, 0, 1, 0, 1.2);
animation: hln-turntable-arm-cue 6s infinite;
}
@keyframes hln-turntable-arm-spin {
to { transform: rotate(360deg); }
}
@keyframes hln-turntable-arm-arm {
0% { transform: rotate(0deg); }
8.33% { transform: rotate(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); }
28.33% { transform: rotate(28deg); }
81.67% { transform: rotate(28deg); animation-timing-function: cubic-bezier(.65,0,.35,1); }
95% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
@keyframes hln-turntable-arm-cue {
0% { transform: matrix(1, 0, 0, 1, 0, 0); }
30% { transform: matrix(1, 0, 0, 1, 0, 0); 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); }
40% { transform: matrix(1, 0, 0, 1, 0, 1.2); }
76.67% { transform: matrix(1, 0, 0, 1, 0, 1.2); animation-timing-function: cubic-bezier(.65,0,.35,1); }
80.83% { transform: matrix(1, 0, 0, 1, 0, 0); }
100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hln-turntable-arm * {
animation: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.hln-turntable-arm, .hln-turntable-arm *, .hln-turntable-arm::before, .hln-turntable-arm::after, .hln-turntable-arm *::before, .hln-turntable-arm *::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.