HTML5 animated logo

Based on Rob Hawkes‘ recreation of the Google logo made up of animated balls, I had a quick play around with HTML5 Canvas and created the Strawberrysoup logo in the same way.

Rather than using images, the balls making up the logo have been created with javascript and they move around as a cursor is hovered over. The movement is based on the placement and movement of your mouse, or it works the same on touch screen devices.

This is a simple example of how you can use HTML5 Canvas to animate almost anything and relate it to the movement of your mouse or fingertips.

You can see it live here, have a play around!