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

:root {
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background: blue;
    width: 40vmin;
    aspect-ratio: 1;
    animation: spin 4.5s linear infinite;
  }
  
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background: conic-gradient(at 80% 80%, #0000 75%, #097 0) 0 0 / 55.5% 55.5%;
    width: 80vmin;
    aspect-ratio: 1;
    scale: 1;
  }
}

About This Illusion

This illusion gives the impression that a blue square is growing and shrinking rhythmically, almost as if it were breathing or beating like a heart.

Although the image is rotating, its size never changes. Mouse over the illustration to remove the green boxes and reveal the rotating blue square.

Try This

Mouse over the demo to see the illusion in action.