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: 6px;
--width: calc(var(--size) * 2);
--height: calc(var(--size) * 3);
margin: 0;
height: 100vh;
background: #777;
font-size: var(--size);
overflow: hidden;
&::before {
content: "";
position: absolute;
width: 400em;
height: 400em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background:
conic-gradient(at var(--size) var(--size), #fff 25%, #0000 0 75%, #000 0) 0 0 / var(--width) var(--height),
#aaa;
}
&::after {
content: "";
position: absolute;
width: 34em;
height: 34em;
top: 50%;
left: 50%;
border-inline: 0.5em solid #aaa;
border-block: 2em solid #aaa;
transform: translate(-50%, -50%) rotate(-45deg);
background:
conic-gradient(at var(--size) var(--size), #fff 25%, #0000 0 75%, #000 0) 0 0 / var(--width) calc(var(--height) * 2),
conic-gradient(at var(--size) var(--size), #fff 25%, #0000 0 75%, #000 0) calc(var(--size) * 0.5) var(--height) / var(--width) calc(var(--height) * 2),
#aaa;
}
}
About This Illusion
When you look around this pattern, the central area appears to slide and sway, even though it is completely static. This illusion makes me dizzy... but that may also be because I had to stare at it for a long time while coding it.
Try This
- Don't get dizzy like me :P