Palisade 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 spin {
  0% { rotate: 0deg; }
  100% { rotate: -360deg; }
}

@keyframes palisade {
  0% { background-position: 0 0; }
  100% { background-position: 8vmin 0; }
}

:root::before {
  content: "";
  width: 40vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border: 1.25vmin solid;
  background:
    linear-gradient(0deg, #0000 48.65%, #000 0 51.35%, #0000 0),
    linear-gradient(45deg, #0000 49%, #000 0 51%, #0000 0),
    linear-gradient(90deg, #0000 48.65%, #000 0 51.35%, #0000 0),
    linear-gradient(135deg, #0000 49%, #000 0 51%, #0000 0),
    linear-gradient(22.5deg, #0000 49%, #000 0 51%, #0000 0),
    linear-gradient(67.5deg, #0000 49%, #000 0 51%, #0000 0),
    linear-gradient(112.5deg, #0000 49%, #000 0 51%, #0000 0),
    linear-gradient(157.5deg, #0000 49%, #000 0 51%, #0000 0);
  animation: spin 6s linear infinite;
}

:root::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background:
    linear-gradient(90deg, #600 0 6vmin, #0000 0 8vmin) 0 0 / 8vmin 100%;
  animation: palisade 0.2s linear infinite;
}

About This Illusion

The radii of a wheel, when viewed through a palisade, appear to curve. In reality, they are perfectly straight. Mouse over the demo to remove the palisade and you will see that the radii never bend.

Try This

Mouse over the demo to see the illusion in action.