10 Crazy HTML5 and JS Experiment Showcase

By Sam Deering

Check out our collection of some of the crazy HTML5 and JavaScript experiments that demonstrate the performance of the framework in rendering a variety of cool interactive effects. Take note though that most of the demos here run smoothly with Google Chrome and Firefox but not in IE as HTML5 is not yet fully supported by it. Have fun!

Related Posts:

1. Canvas Sphere

Canvas Sphere by Emil Korngold renders a 2D projection of the 3D points of a sphere using a tiny sprite 3D engine. The demo uses z-sorting and alpha motion blurring to give the sense of 3D and rotation. Check out the awesome demo!

Canvas Sphere


2. Marbles

Simple physics demo using the freshly released A3 WebGL Engine. Make sure to use Chrome to be able to see the demo. Pretty cool!



3. Noise Field

Particle trails via Perlin noise. Move mouse to change particle motion. Click to randomize parameters.

Noise Field


4. Fishbowl

An amazing HTML 5 test, created by Microsoft to test the performance capability of your browser. Try it and see how many fishes you can run.


Source + Demo

5. Sticky Thing

Throw it and see if it sticks.

Sticky Thing


6. Breathing Galaxies

Is a hypotrochoid with dynamically changing color and diameter powered by JavaScript. You can use the keyboard to change shapes mid-stream, or move the mouse to create a new shape.

Breathing Galaxies


7. Flower Power

Another experiment inspired by nature – simple drawing tool with flowers as brushes using bezier curves.

Flower Power


8. One Hour Per Second

Holy nyans! YouTube now has one hour of video uploaded to the site every second. To put that incredible figure in context, Youtube created an HTML5 site with some figures to compare it to — for example, how many nyan cat “nyans” there are in one day (e.g. 24 seconds of uploads)? Answer: 345,600!

One Hour Per Second


9. Asteroid Belt

HTML5 animation effect on rendered on a photo.

Asteroid Belt

Source + Demo

10. Graph Layout

An interactive force-directed graph layout.

Graph Layout


Sam Deering
Meet the author
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.


Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.