How is it built?
Built with HTML, CSS and determination :-)
CSS properties used include border radius, box shadows, transforms and animations. Buttons are styled checkboxes.
All the code is on github
Why build this?
I wanted to improve my CSS skills and creating animated illustrations in CSS is both fun and challenging.
Inspired by this talk on Illustration with CSS by Lynn Fisher and also this CSS Art by Afragon.
What is this?
Togglefish is an experiment in using pure CSS to create an animated scene.
Pure CSS meaning only HTML & CSS was used. No JavaScript, SVG, or images.
Crafted with determination by Neil Marsden
Toggle
Eyebrows
Eyes
Mouth
Fins
Scales
Body
Bubbles
Zzz
Name
Sky
Mountains
Sea
Sandbanks
Shell
Rocks
Tiny Fish
Crab
UFO
Surfer
Outline
Background
Box Shadow
Border Radius
Border
Transform
Pseudo Elements
Parallax
Shake It ⚠