Fluid Vector Animations: Looking Beyond DOM Manipulation

DOM manipulation to create beautiful animations sparked a whole revolution of Flashless animations that later evolved in to HTML5. Now with browsers supporting the SVG graphics standard it is breath taking what could be done with SVG element manipulation in the browsers. This opens the possibility of stunning vector graphics, that animate beautifully and fluidly.

Here is an example of a simple SVG graphic with temporal manipulation using Javascript to create a smooth animation. (Tested in Google Chrome 25)

This specific result can also be reproduced with CSS3 and DOM manipulation, along with many more such as 3D effects in Webkit, however SVG support is a little more widespread than CSS3 3D and rotate capabilities.

Check out raphael for a framework that revolves around SVG manipulation with Javascript.

Here is some useful documentation on animating SVG natively, with CSS3, and/or Javascript.