Animation SVG or Canvas?

Question

I was wondering whether it's better to make an animation like this in canvas or svg (performance wise)? I'm rewriting it now in jquery but I read somewhere that a canvas is redrawn every time it changes.

Solution

For these "simple" animations and scene graphs it doesn't really matter if you use SVG or Canvas performance wise. Both should work fine without performance issues.

However it might be easier to create animation with SVG compared to Canvas. In Canvas you have to redraw the whole scene and in SVG you could just create the ring once and then define a transformation (rotation) on it.

For SVG check out d3.js or raphael and for canvas you can check out processingjs, fabric.js, kinetic.js or paper.js