8 Simply Amazing HTML5 Canvas and Javascript Animations

Written by Kevin Liew on 24 Jun 2010
152,508 Views • Inspirations

Introduction

HTML5 canvas has changed the way javascript used to be. We're now able to achieve complex animation however we do need a powerful browser to interpret it. The following is 8 new HTML5 + Javascript animation effect you probably have not seen before! Play with each of them, you'll be blown away by the creativity and robustness of HTML5 canvas!

I like Tunnelers and Bomomo the most! You've to try Bomomo, it's fun!

Advertisement
  • Tunnelers

    Processing to sketch out the animation and form, then rewrote it from scratch in Javascript / Canvas HTML5. Simply awesome and amazing!
  • The Mesmerizer

    A simple experiment with a 16x16 grid of squares. Moving the pointer over the squares causes colours to appear and bleed into adjacent squares with an effect that is quite mesmerizing. Try clicking the corner squares or typing on the keyboard for additional effects.
  • Burn

    A simple test of local pixel-based modifications of an HTML5 canvas drawing area. Hold a mouse button down for a "slide down" effect.
  • Cheloniidae Live

    This project is pure JavaScript, though it uses a library that dynamically recompiles JavaScript functions to implement operator overloading. (This is done inside the browser, not ahead-of-time.) Pretty fun, you can alter the code and make your own drawing!
  • Canvas 3D engine

    A 3D engine on canvas, currently supporting a collection of basic prefab shapes, textures, and basic interaction. Current work includes collada (import) support, and improved texture and lighting features.
  • Bomomo

    Best give it a try yourself... just use your mouse & mouse button! All of the sudden, I have become artistic. :)
  • DDD

    Move mouse to draw, drag to rotate. This one is pretty fun, you have to try to see it.
  • Plasma Tree

    Inspired by nature - a visual presentation of a algorithm
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

23 comments
Psycho Lava Lamp 10 years ago
and here comes a kind of lava lamp done with canvas: http://javascript-experiments.googlecode.com/svn/trunk/lavalamp/index.html
Reply
csssample 10 years ago
Excellent Article, Keep posting like this
Reply
Todd 10 years ago
Very nice graphics!

Your screen shots for DDD and Plasma Tree are reversed though.
Reply
blogging for money 10 years ago
Nice roundup you have. Thanks for sharing
Reply
Jordan Walker 10 years ago
Those are way cool, thanks for the round up
Reply
VINIT PRATAP SINGH 10 years ago
very very impressive..
Reply
Free Software Download 10 years ago
Keep Posting N Remember Me..
Reply
Virtual Worlds for Kids 10 years ago
Great article!
Reply
catfan 10 years ago
My site http://catfan.me also using Html5 canvas technology, enjoy it!

PS:left click the sky to add more cloud, double click to clear up. You also can see FPS on the left top.
Reply
Kanchan 9 years ago
awesome amazingly great fun!
Reply
Sunder 9 years ago
Nice roundup you have. Thanks for sharing
Reply
Lindsley 9 years ago
I've made a couple of canvas tools that might be of interest to visitors here. One is a Font creator that make bitmap fonts that then load right into the canvas page. The other is called Canvas Path Maker. It creates simple paths and shapes, and then exports out as JS. They're both free! Please see them at
http://www.davidlindsley.com/canvastools.htm
Reply
Gordy 9 years ago
Has anybody tried Hippo Animator yet? It's like adobe edge but it works in all browsers including iPhone and IE6. http://www.hippostudios.co.uk
Reply