:root {
--p: orange;
--s: teal;
overflow: hidden;
margin: 0;
height: 100vh;
&::before, &::after {
--size: 6em;
content: "";
font-size: 1vmin;
position: absolute;
width: 50em;
aspect-ratio: 1;
top: 50%;
left: calc(50% - min(55em, 50vw));
translate: 0 -50%;
background:
radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p1) var(--p1) / var(--size2) var(--size2),
radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p3) var(--p1) / var(--size2) var(--size2),
radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p2) var(--p1) / var(--size2) var(--size2),
radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p1) var(--p3) / var(--size2) var(--size2),
radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p2) var(--p3) / var(--size2) var(--size2),
radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p1) var(--p2) / var(--size2) var(--size2),
radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p3) var(--p2) / var(--size2) var(--size2),
radial-gradient(farthest-side circle, var(--s) 99%, #0000 0) var(--p2) var(--p2) / var(--size2) var(--size2),
radial-gradient(farthest-side, var(--p) 99%, #0000 0) 50% 50% / var(--size) var(--size);
background-repeat: no-repeat;
transition: left, top, translate;
transition-duration: 1s;
}
&::before {
--size2: calc(var(--size) * 1);
--p1: calc(50% - var(--size2) * 1.2);
--p2: calc(50% - var(--size2) * -1.2);
--p3: 50%;
}
&::after {
left: calc(50% + min(55em, 50vw));
translate: -100% -50%;
--size2: calc(var(--size) * 2.5);
--p1: 0;
--p2: 100%;
--p3: 50%;
}
&:hover {
&::before, &::after {
left: 50%;
top: 50%;
translate: -50% -50%;
}
}
@media(aspect-ratio < 1) {
&::before {
font-size: 1.1vmin;
left: 50%;
top: calc(50% - min(55em, 50vh));
translate: -50% 0%;
}
&::after {
font-size: 1.1vmin;
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.