CSS Experiment Eye #2

CSS Experiment Eye #2

In this experiment I was wanting to leverage the artifacts from transitioning between images. After seeing it as a mistake in a commercial project, I wanted to explore how moving from one image to another could be used for an aesthetically pleasing application.

The eye contains a few interesting techniques:

  • Background image layers transitioning between eachother

  • Overlay layer, with B&W images only transiting as well with a blend mode applied.

  • The animation timings use prime numbers only to avoid repetition, making the visible combinations in the hundreds using only a few images.

Codepen: https://codepen.io/LukeB21/full/QWmELvM

Luke Bennis
Graphic > Web > Product Designer
Get in touch

More by Luke Bennis

View profile