Optical Illusions

An attempt to create optical illusions with CSS and JS. Wikipedia link

1. Hermann Grid Illusion

Idea:

We could achieve this by placing a number of square div elements inside a container div with uniform spacing.

Implementation

Add a container div with relatively large width and height. Append a series of square divs via a JS function as children to the container div. A div is a block element hence it should be arranged inline. We can accomplish this in two ways:

Using display: inline-block' on individual divs.
or Using flexbox display: flex; flex-wrap: wrap; on the container div.

JS Function

    
        var hermann = document.getElementById('hermann-grid');
        var hermannSquare = document.createElement('div');
        hermannSquare.className = "hermann-square";
        hermann.appendChild(hermannSquare);

CSS gotcha:

When using display: inline-block', you run into this gotcha that adds some extra space inbetween the divs. Use flexbox to avoid it.

Optical Illusions

1. Hermann Grid Illusion

2. Scintillating grid Illusion

3. Cafe Wall

4. Ebbinghaus illusion

Comments