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; }
}
@property --color {
syntax: '<color>';
initial-value: #000;
inherits: false;
}
body {
--color: #fff;
margin: 0;
height: 100vh;
overflow: hidden;
background:
radial-gradient(circle, #000 10vmin, #0000 0),
repeating-conic-gradient(var(--color) 0 1%, #000 0 2%);
transition: --color 1s;
&:hover {
--color: #000;
}
&::before {
content: "";
width: 90vmin;
aspect-ratio: 1;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
outline: 1px solid red;
background:
radial-gradient(farthest-side, #0000 77%, #ff3 0 85%, #0000 0 90%, #00e 0 98%, #0000 0);
mask: conic-gradient(#000 2%, #0000 0);
animation: spin 20s linear infinite;
}
}
About This Illusion
It may look like the boxes are moving at different speeds or like a set of walking feet. In reality, all elements move at the same pace and in parallel. Mouse over the demo to reveal the effect.
Try This
- Mouse over the demo to see the illusion in action.