'Tron Legacy' circles
=====================

Nice animation in 'Tron legacy' movie style.
Rotating circles with different sizes generated by Javascprit. Using HTML5, canvas.

Live link: http://pdragun.github.com/tron-circles/

SVG demo in vanilla JS with my own animate library. Purpose is to draw a circles (or part of a circle) with background color as color gradient and rotate them. In SVG you can not bend a rectangle with color gradient. Solution is to split a circle into arcs. First arc has the start color from gradient and the last one the last one from gradient. The rest of the arcs have colors in between. The smallest arcs are 3 radian thick and arcs are overlapping (one radian). Each circle is drawn only once - to Canvas. Each circle has its own canvas. Animate lib rotates canvas.

Size of circles, number, speed and direction of rotation is random.

Max animation speed is 60 FPS. When web browser support hardware acceleration animation is smooth.


Details:
- works well on browsers with hardware acceleration (more than 55 fps, whithout it below 20 fps)
- if the speed of rotation is slow please resize your browser and refresh the page
- to generate new set of circles refresh the page
- 'FPS' at the bottom is number of Frames per Second

Inspired with: http://jtnimoy.net/workviewer.php?q=178 (see image: http://jtnimoy.net/178/TRON_GFX_DG_03.JPG)

Licence is WTFPL. For more informations about it see LICENSE file.