@property --c {
syntax: '<color>';
inherits: true;
initial-value: #00f;
}
body {
--c: #00f;
overflow: hidden;
transition: --c 1s;
&:hover {
--c: #fff;
}
&::before {
--p: #0000 calc(50% - 0.2vmin), var(--c) calc(50% - 0.1vmin) calc(50% + 0.1vmin), #0000 calc(50% + 0.2vmin);
aspect-ratio: 1;
background:
linear-gradient(#f00 0 0) 40.5% 0 / 0.9vmin 100% no-repeat,
linear-gradient(#f00 0 0) 59.5% 0 / 0.9vmin 100% no-repeat,
linear-gradient( 0deg, var(--p)),
linear-gradient( 8deg, var(--p)),
linear-gradient(16deg, var(--p)),
linear-gradient(23deg, var(--p)),
linear-gradient(30deg, var(--p)),
linear-gradient(36deg, var(--p)),
linear-gradient(42deg, var(--p)),
linear-gradient(47deg, var(--p)),
linear-gradient(52deg, var(--p)),
linear-gradient(56deg, var(--p)),
linear-gradient(60deg, var(--p)),
linear-gradient(63deg, var(--p)),
linear-gradient(66deg, var(--p)),
linear-gradient(69deg, var(--p)),
linear-gradient(71deg, var(--p)),
linear-gradient(73deg, var(--p)),
linear-gradient(75deg, var(--p)),
linear-gradient(77deg, var(--p)),
linear-gradient( -8deg, var(--p)),
linear-gradient(-16deg, var(--p)),
linear-gradient(-23deg, var(--p)),
linear-gradient(-30deg, var(--p)),
linear-gradient(-36deg, var(--p)),
linear-gradient(-42deg, var(--p)),
linear-gradient(-47deg, var(--p)),
linear-gradient(-52deg, var(--p)),
linear-gradient(-56deg, var(--p)),
linear-gradient(-60deg, var(--p)),
linear-gradient(-63deg, var(--p)),
linear-gradient(-66deg, var(--p)),
linear-gradient(-69deg, var(--p)),
linear-gradient(-71deg, var(--p)),
linear-gradient(-73deg, var(--p)),
linear-gradient(-75deg, var(--p)),
linear-gradient(-77deg, var(--p));
content: "";
left: 50%;
position: absolute;
top: 50%;
translate: -50% -50%;
width: 100vmin;
}
}
About This Illusion
Perspective-based illusions are fascinating. Even when we know we are looking at a flat image, our brain insists on interpreting depth. In the Hering illusion, the red lines appear to curve outward, even though they are straight.
I coded this in CSS using a single pseudo-element but, looking back, it would have been better to use both ::before and ::after to simplify the transition.
Try This
- Mouse over the demo to see the illusion in action.
- Rotate the image, does the effect persist?