This is cool, but more as a demonstration of interesting CSS techniques than optical illusions in my opinion.
Also, interestingly, I seem to be able to force myself to "see through" all of these illusions except for induced gradients, which I can't stop seeing unless I cover part of the screen.
These "dots appearing only while (not) focused" are known as "extinction illusions", namely
"25 - Appearing Dots"
is "McAnany's type" [1], and
"26 - Disappearing Dots"
is known as "Ninio's type" [2], according Akiyoshi Kitaoka's materials. (I have recreated them too few years ago [3][4], before getting to the source.)
This is a great illusion, though I often see that people try to explain this (and a similar image of strawberries) as "our brain knows this object is supposed to be red so it fills in red", which is not what's happening - it's based on color contrast like many other optical illusions
Worked on a project that wanted to make everything a different grayscale color. It was out of control already when someone one day complained that two pieces of text were a different color.
They weren’t. They were identical. But they were on two different background colors which make the optical illusion that they weren’t. And I reminded them for the twentieth time that we were using too goddamned much gray.
On #4 (White's Illusion) it looks like for me that the gray bar that is surrounded by black is brighter than the one surrounded by white instead of darker :#
16 comments
[ 4.4 ms ] story [ 36.1 ms ] threadI want to put some of them in my UIs.
Also, interestingly, I seem to be able to force myself to "see through" all of these illusions except for induced gradients, which I can't stop seeing unless I cover part of the screen.
[1] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text...
[2] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text...
[3] https://codepen.io/myf/full/XjdmJy ( scintillation warning)
[4] https://codepen.io/myf/full/jMqoMW ( scintillation warning)
I did something similar for my personal favorite illusion, the Ames window illusion. Recreated with CSS: https://brandondong.github.io/blog/ames_window/
Coca cola appears red when no red at all is used in whole image
Worked on a project that wanted to make everything a different grayscale color. It was out of control already when someone one day complained that two pieces of text were a different color.
They weren’t. They were identical. But they were on two different background colors which make the optical illusion that they weren’t. And I reminded them for the twentieth time that we were using too goddamned much gray.