Skip to main content
Portrait picture of me in a patterned dark blue t shirt in front of a grey background

Hi! My name is John Slipper.

I do web development in Auckland, New Zealand.

The Lake Interactive Illustration

Category: Experiment
A preview of the lake illustration set to evening time

Experimenting using the recent has CSS pseudo-class to interactively change an illustration to different times of the day.

When a time of day is selected the CSS of the inline SVG is modified to change colour, position and visibility of parts of the illustration. This means no JavaScript is required to achieve the effect.

The illustration was created with a combination of free assets to attempt to make it “look like a bought one”.

See the Pen The Lake Interactive Illustration by John Slipper (@johnslipper) on CodePen.

Open demo
Tags:
  • a11y
  • CSS
  • HTML
  • JS