:root::before {
aspect-ratio: 1;
background:
radial-gradient(farthest-side circle, #0000 80%, #fff 0) 0 0,
conic-gradient(from 180deg, #000 75%, #0000 0) 0 0 no-repeat,
conic-gradient(from 270deg, #000 75%, #0000 0) 100% 0 no-repeat,
conic-gradient(from 90deg, #000 75%, #0000 0) 0 100% no-repeat,
conic-gradient(from 0deg, #000 75%, #0000 0) 100% 100% no-repeat;
background-size: 50% 50%;
content: "";
left: 50%;
margin: 0;
position: absolute;
width: 60vmin;
top: 50%;
translate: -50% -50%;
/* hack to remove background line */
mask: conic-gradient(#000 0 0) 50% 50% / 99% 99% no-repeat;
}
About This Illusion
When people look at this illustration, they usually say they see a white square over black circles. However, the square is not actually there. The "Pac-Man" shapes create the illusion of a square and a sense of depth. Our brain fills in the missing information.
Try This
- Nothing here, just enjoy the drawing :)