Ebbinghaus Illusion - CSS Optical Illusions

Code Live Demo

:root {
  --p: orange;
  --s: teal;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  
  &::before, &::after {
    --size: 4em;
    content: "";
    font-size: 1vmin;
    position: absolute;
    width: 50em;
    aspect-ratio: 1;
    top: 50%;
    left: calc(50% - min(55em, 50vw));
    translate: 0 -50%;
    background:
      var(--circles),
      radial-gradient(var(--p) var(--size), #0000 0);
    transition: top, left, translate;
    transition-duration: 1s;
  }
  
  &::before {
    --size2: calc(var(--size) / 2);
    --dist: calc(var(--size) * 1.7);
    --distNo: calc(var(--dist) * -1);
    --dist2: calc(var(--size) * 1.23);
    --dist2No: calc(var(--dist2) * -1);
    --circles: 
      radial-gradient(var(--s) calc(--size2), #0000 0) 0 var(--dist),
      radial-gradient(var(--s) calc(--size2), #0000 0) 0 var(--distNo),
      radial-gradient(var(--s) calc(--size2), #0000 0) var(--dist) 0,
      radial-gradient(var(--s) calc(--size2), #0000 0) var(--distNo) 0,
      radial-gradient(var(--s) calc(--size2), #0000 0) var(--dist2) var(--dist2),
      radial-gradient(var(--s) calc(--size2), #0000 0) var(--dist2) var(--dist2No),
      radial-gradient(var(--s) calc(--size2), #0000 0) var(--dist2No) var(--dist2),
      radial-gradient(var(--s) calc(--size2), #0000 0) var(--dist2No) var(--dist2No);
  }
  
  &::after {
    left: calc(50% + min(55em, 50vw));
    translate: -100% -50%;
    --size2: calc(var(--size) * 2.1);
    --size2No: calc(var(--size) * -2);
    --dist: calc(var(--size) * 3);
    --distNo: calc(var(--dist) * -1);
    --dist2: calc(var(--size) * 1.23);
    --dist2No: calc(var(--dist2) * -1);
    --circles: 
      radial-gradient(var(--s) calc(var(--size2)), #0000 0) 15.5% -11% / 50% 50% no-repeat,
      radial-gradient(var(--s) calc(var(--size2)), #0000 0) 84.5% -11% / 50% 50% no-repeat,
      radial-gradient(var(--s) calc(var(--size2)), #0000 0) -16% 50% / 50% 50% no-repeat,
      radial-gradient(var(--s) calc(var(--size2)), #0000 0) 15.5% 111% / 50% 50% no-repeat,
      radial-gradient(var(--s) calc(var(--size2)), #0000 0) 84.5% 111% / 50% 50% no-repeat,
      radial-gradient(var(--s) calc(var(--size2)), #0000 0) 116% 50% / 50% 50% no-repeat
  }
  
  &:hover {
    &::before, &::after {
    left: 50%;
    top: 50%;
      translate: -50% -50%;
    }
  }
  
  @media(aspect-ratio < 1) {
    &::before {
      font-size: 1.2vmin;
      left: 50%;
      top: calc(50% - min(55em, 50vh));
      translate: -50% 0%;
    }
    
    &::after {
      font-size: 1.2vmin;
      left: 50%;
      top: calc(50% + min(55em, 50vh));
      translate: -50% -100%;
    }
  }
}

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.