:root {
--size: 100px;
--width: 3px;
background:
conic-gradient(at 30% calc(var(--size) - var(--width)), #0000 25%, #000 0 50%, #0000 0) 0 0 / var(--size) var(--size),
conic-gradient(at calc(var(--size) - var(--width)) 30% , #0000 25%, #000 0 50%, #0000 0) calc(var(--size) / -3) calc(var(--size) / 3) / var(--size) var(--size),
conic-gradient(at 30% calc(var(--size) - var(--width)), #0000 25%, #000 0 50%, #0000 0) calc(var(--size) / 2) calc(var(--size) / 2) / var(--size) var(--size),
conic-gradient(at calc(var(--size) - var(--width)) 30% , #0000 25%, #000 0 50%, #0000 0) calc(var(--size) / 6) calc(var(--size) / -6) / var(--size) var(--size);
}
About This Illusion
There are no circles or discs in this illustration, only vertical and horizontal lines forming crosses. Our visual system completes the shape and makes us perceive a disc that does not exist.
From a CSS perspective, using conic gradients is a great way to create lines leaving some space in-between repetitions.
Try This
- Nothing here.