Speed Controls
x 0.25
x 0.5
Normal
x 2
x 4
?
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
<
What?
Why?
How?
X
Togglefish
Time Machine
000
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
Toggles
Togglefish
Scenery
CSS Styles
Effects
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 ⚠