Motion Note: this static illustration may appear to move, and could cause dizziness, nausea, or headache in sensitive viewers. To view it click on the "Live Demo" button below. If you experience any discomfort, please stop viewing the illusion and consider taking a break.
:root {
--size: 5vmin;
--sizep: calc(var(--size) * 12);
--sizeh: var(--sizep);
--sizev: var(--sizep);
height: 100vh;
background:
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 1) calc(var(--size) * 1) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 2) calc(var(--size) * 1) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 3) calc(var(--size) * 2) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 3) calc(var(--size) * 2) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 4) calc(var(--size) * 2) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 5) calc(var(--size) * 2) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 6) calc(var(--size) * 2) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 7) calc(var(--size) * 2) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 9) calc(var(--size) * 1.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 10) calc(var(--size) * 1) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 1) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 2) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 2) calc(var(--size) * 2) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 3) calc(var(--size) * 2) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 4) calc(var(--size) * 3) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 4) calc(var(--size) * 3) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 5) calc(var(--size) * 3) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 6) calc(var(--size) * 3) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 7) calc(var(--size) * 3) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 8) calc(var(--size) * 3) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 10) calc(var(--size) * 2.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 2) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 2) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 3) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 3) calc(var(--size) * 3) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 4) calc(var(--size) * 3) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 5) calc(var(--size) * 4) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 5) calc(var(--size) * 4) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 6) calc(var(--size) * 4) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 7) calc(var(--size) * 4) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 8) calc(var(--size) * 4) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 9) calc(var(--size) * 4) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 3.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 3) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 3) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 14) calc(var(--size) * 4) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 4) calc(var(--size) * 4) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 5) calc(var(--size) * 4) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 6) calc(var(--size) * 5) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 6) calc(var(--size) * 5) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 7) calc(var(--size) * 5) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 8) calc(var(--size) * 5) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 9) calc(var(--size) * 5) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 10) calc(var(--size) * 5) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 4.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 4) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 14) calc(var(--size) * 4) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 15) calc(var(--size) * 5) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 5) calc(var(--size) * 5) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 6) calc(var(--size) * 5) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 7) calc(var(--size) * 6) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 7) calc(var(--size) * 6) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 8) calc(var(--size) * 6) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 9) calc(var(--size) * 6) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 10) calc(var(--size) * 6) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 6) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 5.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 14) calc(var(--size) * 5) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 15) calc(var(--size) * 5) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 16) calc(var(--size) * 6) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 6) calc(var(--size) * 6) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 7) calc(var(--size) * 6) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 8) calc(var(--size) * 7) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 8) calc(var(--size) * 7) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 9) calc(var(--size) * 7) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 10) calc(var(--size) * 7) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 7) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 7) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 14) calc(var(--size) * 6.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 15) calc(var(--size) * 6) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 16) calc(var(--size) * 6) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 17) calc(var(--size) * 7) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 7) calc(var(--size) * 7) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 8) calc(var(--size) * 7) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 9) calc(var(--size) * 8) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 9) calc(var(--size) * 8) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 10) calc(var(--size) * 8) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 8) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 8) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 8) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 15) calc(var(--size) * 7.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 16) calc(var(--size) * 7) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 17) calc(var(--size) * 7) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 18) calc(var(--size) * 8) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 8) calc(var(--size) * 8) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 9) calc(var(--size) * 8) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 10) calc(var(--size) * 9) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 10) calc(var(--size) * 9) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 9) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 9) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 9) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 14) calc(var(--size) * 9) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 16) calc(var(--size) * 8.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 17) calc(var(--size) * 8) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 18) calc(var(--size) * 8) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 19) calc(var(--size) * 9) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 9) calc(var(--size) * 9) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 10) calc(var(--size) * 9) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 10) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 10) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 10) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 10) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 14) calc(var(--size) * 10) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 15) calc(var(--size) * 10) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 17) calc(var(--size) * 9.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 18) calc(var(--size) * 9) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 19) calc(var(--size) * 9) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 20) calc(var(--size) * 10) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 10) calc(var(--size) * 10) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 10) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 11) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 11) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 11) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 14) calc(var(--size) * 11) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 15) calc(var(--size) * 11) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 16) calc(var(--size) * 11) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 18) calc(var(--size) * 10.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 19) calc(var(--size) * 10) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 20) calc(var(--size) * 10) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 21) calc(var(--size) * 11) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 11) calc(var(--size) * 11) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 11) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 12) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 12) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 14) calc(var(--size) * 12) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 15) calc(var(--size) * 12) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 16) calc(var(--size) * 12) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 17) calc(var(--size) * 12) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 19) calc(var(--size) * 11.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 20) calc(var(--size) * 11) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 21) calc(var(--size) * 11) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 22) calc(var(--size) * 12) ,
conic-gradient(at calc(100% - var(--size)) var(--size), #0000 40deg, #000 0 90deg, #0000 0) calc(var(--size) * 12) calc(var(--size) * 12) ,
conic-gradient(at calc(100% - var(--size) * 1.2) var(--size), #0000 57deg, #000 0 90deg, #0000 0) calc(var(--size) * 13) calc(var(--size) * 12) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 14) calc(var(--size) * 13) ,
conic-gradient(at calc(var(--size) * 1.3) calc(100% - var(--size) / 5), #0000 180deg, #000 0 292deg, #0000 0) calc(var(--size) * 14) calc(var(--size) * 13) ,
conic-gradient(at var(--size) 100%, #0000 270deg, #000 0 320deg, #0000 0) calc(var(--size) * 15) calc(var(--size) * 13) ,
conic-gradient(at calc(var(--size) / 2) calc(100% - var(--size)), #0000 180deg, #000 0 270deg, #0000 0) calc(var(--size) * 16) calc(var(--size) * 13) ,
conic-gradient(at calc(var(--size) * 0.9) calc(100% - var(--size)), #0000 217deg, #000 0 270deg, #0000 0) calc(var(--size) * 17) calc(var(--size) * 13) ,
conic-gradient(at calc(var(--size) * 1.4) calc(100% - var(--size)), #0000 239deg, #000 0 270deg, #0000 0) calc(var(--size) * 18) calc(var(--size) * 13) ,
conic-gradient(at calc(100% - var(--size)) calc(100% - var(--size) / 2), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 20) calc(var(--size) * 12.5),
conic-gradient(at calc(100% - var(--size) * 1.3) 0, #000 125deg, #0000 0) calc(var(--size) * 21) calc(var(--size) * 12) ,
conic-gradient(at calc(100% - var(--size) * 0.9) 0, #000 142deg, #0000 0) calc(var(--size) * 22) calc(var(--size) * 12) ,
conic-gradient(at calc(100% - var(--size) / 2) calc(100% - var(--size)), #0000 90deg, #000 0 180deg, #0000 0) calc(var(--size) * 23) calc(var(--size) * 13)
;
background-size: var(--sizeh) var(--sizev);
&::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(53% 47%, hotpink 66.6%, transparent 0 82.5%, yellowgreen 0) 0 0 / var(--size) var(--size);
}
}
About This Illusion
This demo was challenging to code and takes a long time to load. Mainly because it uses a large number of conic gradients behind the scenes, which browsers struggle to render efficiently. There is probably a better way to implement it, but I have not explored that yet.
If you look closely at the illustration, you may notice wave-like motion. As with the previous illusions in this section, the image is entirely static
Try This
- Look from side to side.