Optical Illusions in CSS: A New Collection

In a fascinating development, a coder from the digital world has created a collection of optical illusions using only CSS and HTML. This collection, now available on CodePen, features 40 illusions that are sure to captivate and intrigue. The illusions range from simple color effects to complex animations, and they are designed to challenge our perception and understanding of visual reality.

Animated Illusions

One of the standout features of this collection is the use of animation. For instance, the Mainz-Linez Illusion is an animated optical illusion that works best on narrower or larger screens. The red dots in this illusion seem to move up and down, but when you focus on a black cross, they start moving in a wavy motion. This illusion was created using a wave shape generator by @afif.

The Breathing Square

Another animated illusion is the Breathing Square. At first glance, it appears as if the blue square is pulsating or breathing, growing and shrinking in sequence. However, upon closer inspection, you'll find that it is the same square with the same size, just spinning. This illusion is another example of the coder's innovative use of CSS and animation.

Color Effects

Color effects are another key feature of this collection. For example, the Gray Color Circles illusion may seem to depict red, blue, and green spheres, but they are all actually gray. By overlapping primary colors on top, the brain "fills in" the circles with the colors at hand. This illusion is a testament to the power of perception and the human brain's ability to interpret visual information.

Curvature Blindness

Curvature Blindness is another intriguing illusion in the collection. This set of curves is almost equal, with the only difference being their colors. When painted from inflection point to inflection point or from peak to peak, they look completely different. One of them even stops looking like a wave! This illusion is particularly effective on smaller screens.

Simplicity and Ease

Not all of the illusions in the collection are complex. Some, like the Gray Bars illusion, are simple yet effective. The two side columns and the line in the middle are all the same flat gray color. The only gradient is the background, not the lines themselves. This illusion is a testament to the coder's ability to create visually striking illusions with minimal effort.

Relevance to North East India and Beyond

The creation of this collection of optical illusions using CSS and HTML is a significant development in the world of digital design. It showcases the power of coding and the creative potential of the internet. For those in North East India and beyond, this collection offers a unique opportunity to explore the fascinating world of optical illusions and to challenge their perception of visual reality.

Future Developments

The coder behind this collection plans to add more illusions to the collection in the next few weeks. This means that there will be even more opportunities to explore the world of optical illusions and to challenge our perception of visual reality. Stay tuned for updates and new additions to this fascinating collection.