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: 8px;
--lineNo: calc(var(--line) * -1);
--lineNo2: calc(var(--line) / -2);
--color: #888;
--bgColor: #fff;
transition: --color 1s;
margin: 0;
height: 100vh;
background:
/* circles */
radial-gradient(
circle,
#000 var(--line),
#fff 0 calc(var(--line) * 1.2),
#0000 0
) var(--lineNo2) var(--lineNo2) / var(--size2) var(--size2),
/* horizontal lines */
linear-gradient(
#0000 calc(var(--size) - var(--line)),
var(--color) 0
) 0 0 / var(--size) var(--size),
/* vertical lines */
linear-gradient(
90deg,
#0000 calc(var(--size) - var(--line)),
var(--color) 0
) 0 0 / var(--size) var(--size),
/* diagonal lines */
linear-gradient(
45deg,
#0000 calc(50% - var(--line) / 2),
var(--color) 0 calc(50% + var(--line) / 2),
#0000 0
) 0 0 / var(--size) var(--size),
linear-gradient(
135deg,
#0000 calc(50% - var(--line) / 2),
var(--color) 0 calc(50% + var(--line) / 2),
#0000 0
) var(--lineNo) 0 / var(--size) var(--size),
var(--bgColor);
}
About This Illusion
This pattern consists of repeating black and white dots across the page. If you focus on one dot, the others will begin to disappear. At first it may happen by row or column, but after a short while, most of them vanish.
Try This
If you do not immediately see the effect:
- Focus on one black dot.
- Mouse over it.
- Wait a few seconds while keeping your focus.
- Then mouse out.