8 Simply Amazing HTML5 Canvas and Javascript Animations

Written by Kevin Liew on 24 Jun 2010
163,559 Views • Inspirations


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!

  • 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.

Deepak 13 years ago
Excellent work by developers...thanks for organizing these here
html5 nut 12 years ago
Flag burning using canvas particle effects: http://flagburningworld.com
Jack Stanley 12 years ago
You may also want to check mugeda.com. They do HTML5 animation online.
ee 12 years ago
nursuraiya 12 years ago
it's so good
Francivaldo 12 years ago
Inovador (BR)
saravanan 12 years ago
excellent.... cool cool
Carlos Lima 12 years ago
I developed some powerful tools for creating HTML5 Canvas animations. Please, check them out at http://www.redblizzard.com and let me know what you think.
xisto 12 years ago
pradeep 12 years ago
its really great ! i,ve never seen this type of animation with html5 and jquery. thanks for this post.