Mainz-Linez Illusion - CSS Optical Illusion

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.

Code Live Demo

Open fullscreen view

@keyframes ball {
  0% { transform: translate(0, 0); }
  100% { transform: translate(0, -92%); }
}

:root {
  height: 100vh;
  overflow: hidden;
  font-size: 0.8vw;
  background: 
    linear-gradient(#000 0 0) 50% 50% / 0.4em 2em,
    linear-gradient(#000 0 0) 50% 50% / 2em 0.4em,
    linear-gradient(#000 0 0) 50% 3em / 0.4em 2em,
    linear-gradient(#000 0 0) 50% 3.8em / 2em 0.4em,
    linear-gradient(#000 0 0) 50% calc(100% - 3em) / 0.4em 2em,
    linear-gradient(#000 0 0) 50% calc(100% - 3.8em) / 2em 0.4em,
    #777;
  background-repeat: no-repeat;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    --mask:
      radial-gradient(7.75em at calc(100% + 5.25em) 50%,#0000 calc(99% - 1em),#000 calc(101% - 1em) 99%,#0000 101%) calc(50% - 5em + .5px) calc(50% - 10em)/ 10em 20em,
      radial-gradient(7.75em at -5.25em 50%,#0000 calc(99% - 1em),#000 calc(101% - 1em) 99%,#0000 101%) calc(50% + 5em) 50%/10em 20em;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    background: #fff;
    clip-path: polygon(5% 0, 45% 0, 45% 100%, 55% 100%, 55% 0, 95% 0, 95% 100%, 5% 100%);
    clip-path: polygon(0% 0, 45% 0, 45% 100%, 55% 100%, 55% 0, 100% 0, 100% 100%, 0% 100%)
  }
  
  &::after {
    --color: #f00;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background:
      radial-gradient(circle at 50% 96%, red 2em, #0000 0) 50% 50% / 8% 100%
      ;
    animation: ball 3s linear alternate infinite;
    clip-path: polygon(0% 0, 45% 0, 45% 100%, 55% 100%, 55% 0, 100% 0, 100% 100%, 0% 100%)
  }
}

About This Illusion

Focus on one of the red dots. You will notice it moves straight up and down along a vertical path. Now shift your focus to one of the black crosses in the center. Suddenly, the red dots appear to zigzag instead of moving straight.

The CSS code for the wavy lines is adapted from a Temani Afif snippet on CSS-Tricks and his wavy shape generator.

Try This

Focus on the cross at the center of the illustration.
Resize the screen. Is it easier to perceive in smaller or larger screens?