The Water Cycle

Educational website for children


The Water Cycle is a interactive e-learning website that explains scientific concepts to children aged from 6-11 years old. It uses simple interactions to progress through each step and reveal animated examples along with more information.

My Role

  • Visual Design/Illustration
  • Motion Design
  • Front-end Development

Tools/Technologies Used

  • Adobe Illustrator
  • Adobe After Effects
  • SVG
  • CSS Animations
  • Gulp
  • SCSS
  • Javascript
  • jQuery
  • Anime.js
  • Lottie.js


The site is essentially one large SVG based scene with the camera moving around and zooming in/out as the user navigates through the steps. Each scene explains a part of the water cycle and provides some information. Ultimately the user ends up back where they started and is provided with a multiple choice quiz on the information they have just read. As this is for younger users the answers are shown after incorrect attempts.

Colour Palette


Animations and Easter Eggs

Some of the animations are built in as easter eggs. Allowing users to discover them by accident and reward their curiosity.