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 {
--size: 120px;
--size2: calc(var(--size) * 2);
--line: 16px;
--lineNo2: calc(var(--line) / -2);
--color: #fff8;
--bgColor: #000;
transition: --color 1s;
margin: 0;
height: 100vh;
background:
radial-gradient(
circle,
#fff calc(var(--line) * 0.75),
#0000 0
) var(--lineNo2) var(--lineNo2) / var(--size2) var(--size2),
linear-gradient(
#0000 calc(var(--size) - var(--line)),
var(--color) 0
) 0 0 / var(--size) var(--size),
linear-gradient(
90deg,
#0000 calc(var(--size) - var(--line)),
var(--color) 0
) 0 0 / var(--size) var(--size),
var(--bgColor);
}
About This Illusion
Another classic illusion. Focus on the white dots and the adjacent dots will appear to turn black. There is no animation, no transition, and nothing dynamic. Just intersecting lines and small white circles, yet it looks like motion.
From a CSS perspective, this illusion is just three gradients layered on top of each other: a radial gradient for the white dots, and two linear gradients for the black lines. The trick is in the positioning of the gradients and the size of the dots.
Try This
- Mouse over the demo to see the illusion in action.