Just some animation and other demos. Not very useful.
Some simple particle animations using Canvas.
A simple version of an old classic.
Connected Graph Animation
- Connected Graph
- Connected Graph 2
- Connected Graph 3 (move mouse to interact)
- Connected Graph 4 (move mouse to interact)
Recursive Nested HTML divs
CSS 3D Demos
Some CSS-3D animations. The HTML is generated by JS, but the animation is pure CSS.
- Color Cube – RGB color cube
- Color Cube – showing the named CSS colors
- Color Cylinder – HSL color cylinder
- Color Line – a long line of colored boxes
- Circles 1
- Circles 2
- Circles 3
- Dizzy – nested 2D rotations
- Dizzy 2 – a simpler version
- Dizzy 3 – nested 3D rotations
- Boxes – a simple hover effect
- Boxes 2 – 3D rotation
3D Point clouds
These scripts predate CSS-3D and Canvas3D - they just use plain HTML, CSS and JS.
- Lissajous Knots – some ABC Logo lissajous knots, plus a few others
- Spherical Helix
- Helical Helix
- Toroidal Helix
- Random Points on a Sphere
- Surface Wave
- Cubic Lattice
- Random Points
Never finished. Needed terrain and collision detection. The lander flies though.
Also unfinished. Need to add missiles! The rockets fly though.
A simple version of an old classic, written in plain HTML + JS.
Canvas vs SVG Comparison
Create random moving dots until the animation starts to crawl: Canvas is much faster than SVG, but SVG still gives pretty good performance up to thousands of dots, and gives you interaction via DOM events for free.
Random boxes and circles
- Random Boxes
- Random Boxes 2
- Random Circles
- Random Boxes - SVG version
- Random Circles - SVG
- Boxes: HSL Colors