Ebbinghaus Illusion (III) - CSS Optical Illusions

Code Live Demo

@property --size2 {
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

@property --l {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

@property --s {
  syntax: '<color>';
  inherits: true;
  initial-value: teal;
}

@keyframes moveH {
  0%, 100% {
    --size2: calc(var(--size) * 1);
    --t: 50%;
    --l: 25%;
    background-position: 32% 19%, 68% 19%, 14% 50%, 32% 81%, 68% 81%, 86% 50%, 50% 50%;
  }
  50% {
    --size2: calc(var(--size) * 2);
    --t: 50%;
    --l: 75%;
    background-position: 15.5% -11%, 84.5% -11%, -16% 50%, 15.5% 111%, 84.5% 111%, 116% 50%, 50% 50%;
  }
}


:root {
  --p: orange;
  --s: teal;
  --size: 4em;
  font-size: 1vmin;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  transition: --s 1s;
  
  &::before {
    --size2: calc(var(--size) * 1);
    --t: 50%;
    --l: 25%;
    content: "";
    position: absolute;
    width: 50em;
    aspect-ratio: 1;
    top: var(--t);
    left: var(--l);
    translate: -50% -50%;
    background:
      radial-gradient(var(--s) calc(var(--size2)), #0000 0),
      radial-gradient(var(--s) calc(var(--size2)), #0000 0),
      radial-gradient(var(--s) calc(var(--size2)), #0000 0),
      radial-gradient(var(--s) calc(var(--size2)), #0000 0),
      radial-gradient(var(--s) calc(var(--size2)), #0000 0),
      radial-gradient(var(--s) calc(var(--size2)), #0000 0),
      radial-gradient(var(--p) var(--size), #0000 0);
    background-size: 50% 50%;
    background-repeat: no-repeat;   
    animation: moveH 5s linear infinite;
  }
  
  &:hover {
    --s: #0000;
  }
}

About This Illusion

Which orange circle is larger: the one on the right or the one on the left? It is a trick question: both are the same size. However, having smaller surrounding elements gives the impression that one is larger.

Try This

Mouse over the demo to see the illusion in action.