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.
/* this illusion requires a "complex" HTML to run, check out the live demo's source */
:root {
margin: 0;
height: 100vh;
overflow: hidden;
font-size: 0.75vmin;
background: #aaa;
}
section, article {
width: 100em;
aspect-ratio: 1;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
display: flex;
flex-wrap: wrap;
}
article {
width: 150em;
}
div {
width: 50em;
height: 50em;
position: relative;
background: red;
border-radius: 50%;
background:
repeating-conic-gradient(#06f 0 3.6deg, #000 0 7.2deg, #dd0 0 10.8deg, #fff 0 14.4deg);
& > & {
translate: -50% -50%;
top: 50%;
left: 50%;
scale: 0.82;
rotate: -6deg;
& > & > & > & {
scale: 0.78
}
}
}
About This Illusion
This is one of only two optical illusions in this collection where I used HTML elements instead of relying exclusively on CSS. It is a classic effect: when you look at the illustration, the peripheral discs appear to rotate, even though nothing is actually moving.
Try This
- Don't get dizzy XD