Speed as a signal
The needle shows pointer speed, mapped to an angle and smoothed with a spring.
Move your pointer fast, then stopEdit
.gauge-scene {
display: grid;
place-items: center;
height: 100%;
}
.gauge {
position: relative;
width: 220px;
height: 120px;
overflow: hidden;
border-radius: 120px 120px 0 0;
background: conic-gradient(from -90deg at 50% 100%, #16c784, #ffb020, #ff5d6c 180deg, transparent 0);
}
.gauge__needle {
position: absolute;
bottom: 0;
left: calc(50% - 3px);
width: 6px;
height: 100px;
border-radius: 3px;
background: #0c1324;
transform-origin: 50% 100%;
}