Optical Illusions & Impossible Objects

“We do not know space. We do not see it, we do not hear it, we do not feel it. We are standing in the middle of it, we ourselves are part of it, but we know nothing about it.” ― M.C. Escher

All of the optical illusions on this page are made using CSS and javascript code. Recreating these classical illustrations is a fun way to learn about different CSS properties and experiment. I'll do my best to walk through each illustration so you can see how simple it is.

Penrose Triangle

The Penrose triangle is a triangular impossible object. It was first created by the Swedish artist Oscar Reutersvärd in 1934. The triangle is featured prominently in the works of artist M. C. Escher, whose earlier depictions of impossible objects partly inspired it.

There are two steps to recreating the Penrose triangle using CSS. First draw 3 squares, stacked on top of each other. Rotate the second square 120 degrees and the third square 240 degrees. Cut-off the space where the squares don't overlap.

Gabor Bars

This illusion exploits a core assumption the human brain makes when visually processing- that usually, all the parts of a given moving surface have a single, coherent global motion. In other words, objects move together. This illusion employs strong motion signals (the movement inside each stationary bar) that fool the brain into thinking that the whole object is moving.

Café wall ☕️

This illusion is a pattern where different coloured squares in straight lines appear to form horizontal curved lines. It is called a café wall illusion because this type of artwork is often seen on café walls.

Stanley Yelnats

The CSS rotate3d() function is used to rotate elements in a three-dimensional space. To create the illusion of a hole, above, 2 path elements create squares. Those squares are rotated around an axis. Specifically they are rotated around the X axis: rotateX(68deg), and the Z axis: rotateZ(-32deg).

Circles

Messing around with the canvas element. Try clicking the cirlces above!