:root::before {
aspect-ratio: 1;
background:
radial-gradient(#0f0 28.5em, #0000 calc(28.5em + 1px)),
radial-gradient(#0000 20em, #fff calc(20em + 1px)) 0 0 / 50% 50%,
repeating-radial-gradient(#fff 0 2.5em, #000 calc(2.5em + 1px) calc(3.3333em - 1px), #fff 3.3333em) 0 0 / 50% 50%;
background-blend-mode: lighten;
content: "";
font-size: 0.65vmin;
left: 50%;
position: absolute;
top: 50%;
translate: -50% -50%;
width: 80em;
}
About This Illusion
This illustration shows concentric circles, some of which have a green-and-black pattern. Our brain perceives a central patterned circle and four concentric circles around it, beneath the green circle.
I cheated a little when creating this in CSS, as I actually used a green circle blended with the other backgrounds.
Try This
- Nothing... just enjoy the illustration.