Motion Note: this static illustration may appear to move, 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.
:root {
--x: 15vmin;
--y: calc(var(--x) / 4);
background: repeating-conic-gradient(
#fff 0 25%,
#000 0 50%
) 0 0 / var(--x) var(--y);
}
:root::before {
aspect-ratio: 1;
background: inherit;
border-radius: 50%;
content: "";
left: 50%;
position: absolute;
rotate: 90deg;
top: 50%;
translate: -50% -50%;
width: calc(var(--x) * 3);
}
About This Illusion
The Ouchi Illusion creates the impression that the pattern inside the circle is moving sideways, even though it is completely stationary. This effect is achieved through the use of contrasting patterns and colors that trick your visual perception.
From a CSS perspective, the illusion is created using a repeating conic gradient for the background, and a pseudo-element that overlays a larger circle with the same pattern but rotated.
Try This
- Focus on the center of the circle
- Quickly shift your gaze to the surrounding area
- Move your head side-to-side/back-and-forth while looking at the pattern