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.
@property --x {
syntax: '<length>';
initial-value: 0px;
inherits: true;
}
@keyframes moveX {
0% {
--x: -32vmin;
}
100% {
--x: 32vmin
}
}
:root {
--x: calc(50% - 35vmin);
margin: 0;
height: 100vh;
overflow: hidden;
background:
radial-gradient(circle at 50% 50%, blue 0.75vmin, red 0 1.5vmin, #0000 0) var(--x) 50% / 100% 100%,
#aaa;
animation: moveX 2s linear alternate infinite;
&::before, &::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 80vmin;
height: 2vmin;
background: repeating-linear-gradient(90deg, #fff 0 2vmin, #000 0 4vmin);
transform-origin: 0 50%;
rotate: -25deg;
}
&::after {
rotate: 25deg;
}
}
About This Illusion
Follow the red dot as it moves sideways. From the corner of your vision, it may appear that the dashed black-and-white lines are moving closer together (when the dot moves left) or farther apart (when it moves right). In reality, the lines are completely static.
Try This
- Mouse over the demo to see the illusion in action.