Motion Note: this illustration moves, and could cause dizziness, nausea, or headache in sensitive viewers. To view it click on the "Live Demo" button below. If you experience any discomfort, please stop viewing the illusion and consider taking a break.
@keyframes spin {
0% { rotate: 0; }
100% { rotate: -360deg;}
}
:root {
margin: 0;
height: 100vh;
background: #bbb;
&::before,
&::after {
content: "";
width: 50vmin;
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
&::before {
background: conic-gradient(#aaa, #555, #aaa);
background: radial-gradient(at 50% 75%, #555 10%, #aaa 90%);
background:
conic-gradient(#595959 22.5deg, #5c5c5c 0 45deg, #646464 0 67.5deg, #707070 0 90deg, #7f7f7f 0 112.5deg, #8e8e8e 0 135deg, #9a9a9a 0 157.5deg, #a2a2a2 0 180deg, #a5a5a5 0 202.5deg, #a2a2a2 0 225deg, #9a9a9a 0 247.5deg, #8e8e8e 0 270deg, #7f7f7f 0 292.5deg, #707070 0 315deg, #646464 0 337.5deg, #5c5c5c 0)
;
animation: spin 1s steps(16, end) infinite;
}
&::after {
--a: #0000 49.5%, #777 0 50.5%, #0000 0;
--b: #0000 49.7%, #777 0 50.3%, #0000 0;
background:
linear-gradient(0deg, var(--a)),
linear-gradient(22.5deg, var(--b)),
linear-gradient(45deg, var(--b)),
linear-gradient(67.5deg, var(--b)),
linear-gradient(90deg, var(--a)),
linear-gradient(112.5deg, var(--b)),
linear-gradient(135deg, var(--b)),
linear-gradient(157.5deg, var(--b));
}
}
About This Illusion
This illusion is delightful and disorienting. While the background colors of the wheel are spinning, the spokes remain fixed. However, they appear to rotate in the opposite direction. In reality, only the background is moving.
Try This
- Don't get dizzy.