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: 0deg; }
100% { rotate: 360deg; }
}
:root {
background: #f00;
&::before {
position: absolute;
font-size: 0.25vmin;
width: 260em;
aspect-ratio: 1;
content: "";
top: 50%;
left: 50%;
translate: -50% -50%;
animation: spin 2s steps(20,end) infinite;
background:
radial-gradient(circle at 230.00em 130.00em, #fff 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 225.11em 160.90em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 210.90em 188.78em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 188.78em 210.90em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 160.90em 225.11em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 130.00em 230.00em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 99.10em 225.11em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 71.22em 210.90em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 49.10em 188.78em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 34.89em 160.90em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 30.00em 130.00em, #999 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 34.89em 99.10em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 49.10em 71.22em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 71.22em 49.10em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 99.10em 34.89em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 130.00em 30.00em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 160.90em 34.89em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 188.78em 49.10em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 210.90em 71.22em, #666 13em, #0000 calc(13em + 1px)),
radial-gradient(circle at 225.11em 99.10em, #666 13em, #0000 calc(13em + 1px));
}
&::after {
content: "";
position: absolute;
font-size: 0.25vmin;
width: 10em;
aspect-ratio: 1;
top: 50%;
left: 50%;
translate: -50% -50%;
background:
linear-gradient(90deg, #0000 45%, #000 0 55%, #0000 0),
linear-gradient(#0000 45%, #000 0 55%, #0000 0);
}
}
About This Illusion
Follow the light gray circle as it spins, and the darker circles will appear to change from gray to greenish. Focus on the cross at the center, and after a short time, the darker circles may begin to fade entirely.
Try This
- Follow the light gray circle.
- Focus on the cross at the center of the illusion.