@property --c {
syntax: '<color>';
inherits: true;
initial-value: #00f;
}
:root {
--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)) -50vmin 0,
linear-gradient( 8deg, var(--p)) -50vmin 0,
linear-gradient( 16deg, var(--p)) -50vmin 0,
linear-gradient( 23deg, var(--p)) -50vmin 0,
linear-gradient( 30deg, var(--p)) -50vmin 0,
linear-gradient( 36deg, var(--p)) -50vmin 0,
linear-gradient( 42deg, var(--p)) -50vmin 0,
linear-gradient( 47deg, var(--p)) -50vmin 0,
linear-gradient( 52deg, var(--p)) -50vmin 0,
linear-gradient( 56deg, var(--p)) -50vmin 0,
linear-gradient( 60deg, var(--p)) -50vmin 0,
linear-gradient( 63deg, var(--p)) -50vmin 0,
linear-gradient( 66deg, var(--p)) -50vmin 0,
linear-gradient( 69deg, var(--p)) -50vmin 0,
linear-gradient( 71deg, var(--p)) -50vmin 0,
linear-gradient( 73deg, var(--p)) -50vmin 0,
linear-gradient( 75deg, var(--p)) -50vmin 0,
linear-gradient( 77deg, var(--p)) -50vmin 0,
linear-gradient( -8deg, var(--p)) -50vmin 0,
linear-gradient(-16deg, var(--p)) -50vmin 0,
linear-gradient(-23deg, var(--p)) -50vmin 0,
linear-gradient(-30deg, var(--p)) -50vmin 0,
linear-gradient(-36deg, var(--p)) -50vmin 0,
linear-gradient(-42deg, var(--p)) -50vmin 0,
linear-gradient(-47deg, var(--p)) -50vmin 0,
linear-gradient(-52deg, var(--p)) -50vmin 0,
linear-gradient(-56deg, var(--p)) -50vmin 0,
linear-gradient(-60deg, var(--p)) -50vmin 0,
linear-gradient(-63deg, var(--p)) -50vmin 0,
linear-gradient(-66deg, var(--p)) -50vmin 0,
linear-gradient(-69deg, var(--p)) -50vmin 0,
linear-gradient(-71deg, var(--p)) -50vmin 0,
linear-gradient(-73deg, var(--p)) -50vmin 0,
linear-gradient(-75deg, var(--p)) -50vmin 0,
linear-gradient(-77deg, var(--p)) -50vmin 0;
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. The opposite effect to the Hering illusion is the Wundt illusion. When the lines expand from the sides toward the center, the red lines appear to curve inward (this effect is more subtle).
I had already coded the Hering illusion (which was not ideal code, but worked). The only change was updating the background position.
Try This
- Mouse over the demo to see the illusion in action.