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: #bbb;
&::before {
position: absolute;
font-size: 0.25vmin;
width: 260em;
aspect-ratio: 1;
content: "";
top: 50%;
left: 50%;
translate: -50% -50%;
animation: spin 2s steps(12,end) infinite;
background:
radial-gradient(circle at 230.00em 130.00em, #f0f8 2em, #0000 20em),
radial-gradient(circle at 216.60em 180.00em, #f0f8 2em, #0000 20em),
radial-gradient(circle at 180.00em 216.60em, #f0f8 2em, #0000 20em),
radial-gradient(circle at 130.00em 230.00em, #f0f8 2em, #0000 20em),
radial-gradient(circle at 80.00em 216.60em, #f0f8 2em, #0000 20em),
radial-gradient(circle at 43.40em 180.00em, #f0f8 2em, #0000 20em),
radial-gradient(circle at 30.00em 130.00em, #f0f8 2em, #0000 20em),
radial-gradient(circle at 43.40em 80.00em, #f0f8 2em, #0000 20em),
radial-gradient(circle at 80.00em 43.40em, #f0f8 2em, #0000 20em),
radial-gradient(circle at 130.00em 30.00em, #f0f8 2em, #0000 20em),
radial-gradient(circle at 180.00em 43.40em, #f0f8 2em, #0000 20em);
}
&::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
This illustration shows a circle made of pink dots, with one dot missing. Focus on the cross at the center and the missing dot will appear as a yellow or green dot, giving the impression that it is "eating" the pink dots. Just like Pac-Man.
I could have used CSS trigonometric functions to calculate the exact positions of the dots, but since they never change, I chose to hardcode the values instead.
Try This
- Double check the colors and positions of the dots.