Pinna-Brelstaff Illusion - CSS Optical Illusions

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 moveDot {
  0% {
    background-position: calc(var(--tile) * 4.6) calc(var(--tile2) / -2), 0 0, 0 0, 0 0, 0 0, 0 0;
  }  
  100% {
    background-position: calc(var(--tile) * -5.2) calc(var(--tile2) / -2), 0 0, 0 0, 0 0, 0 0, 0 0;
  }  
}

:root {
  --size: 90em;
  --tile: calc(var(--size) / 14);
  --tile2: calc(var(--tile) / 2);
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background: #777;
  font-size: 1vmin;
  
  &::before,
  &::after {
    content: "";
    --c: radial-gradient(#0000 0 0);
    width: var(--size);
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background:
      var(--c),
      linear-gradient(#0000 var(--tile2), #777 0) 0 0 / var(--tile) var(--tile),
      linear-gradient(90deg, #0000 var(--tile2), #777 0) 0 0 / var(--tile) var(--tile),
      conic-gradient(at 1px 1px, #000 25%, #0000 0 50%, #000 0) 0 0 / var(--tile) var(--tile),
      
      conic-gradient(at calc(var(--tile2) - 1px) calc(var(--tile2) - 1px), #fff 75%, #0000 0) 0 0 / var(--tile) var(--tile);
  }
  
  &::after {
    --c: radial-gradient(#1fb 0.5em, #0000 calc(0.5em + 1px)) calc(var(--tile) * -5.2) calc(var(--tile2) / -2);
    scale: 1 -1;
    transform: translate(0, var(--tile2));
    clip-path: polygon(33% 13%, 62% 13%, 62% 20%, 70% 20%, 69% 27%, 77% 27%, 77% 34%, 83% 34%, 84% 63%, 77% 63%, 76% 70%, 69% 70%, 70% 77%, 63% 77%, 62% 84%, 33% 84%, 34% 77%, 27% 77%, 27% 70%, 20% 70%, 19% 63%, 12% 63%, 12% 34%, 19% 34%, 19% 27%, 26% 27%, 26% 20%, 33% 20%);
    animation: moveDot 2s alternate linear infinite;
  }
}

About This Illusion

This illusion is particularly dizzying. Follow the bluish dot as it moves from right to left and back again. It will appear as though parts of the tiled background are shifting, even though they are static. The only moving element is the dot.

From a CSS perspective, I coded the pattern using conic gradients, and applied it to the ::before and ::after pseudo-elements. I then flipped one upside down and clipped it.

Try This

Mouse over the demo to see the illusion in action.