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 {
background: #777;
&::before {
content: "";
width: 50vmin;
aspect-ratio: 1;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
background:
radial-gradient(farthest-side, #000 2%, #fff 0 3.5%, red 0 20%, #0000 0 80%, lime 0),
repeating-conic-gradient(#0000 0 60deg, red 0 120deg),
lime;
animation: spin 3s linear infinite;
}
}
About This Illusion
If you focus on the black dot, the illustration may appear to develop a darker greenish or brownish border. However, the colors never change.
This optical illusion requires only two gradients: a conic gradient for the fan-shaped arms and a radial gradient for the circles and discs.
Try This
- Mouse over the demo to see the illusion in action.