Initially, we targeted the ASV3 plug-in with IE using SMIL animation with the animateTransform element. We found that as the number of turbines on a diagram increased, so did the frequency of IE crashes and unexpected graphical behaviors. As an alternative, we began using JavaScript to simulate the animation. We thought this might provide better scalability for IE as well as allowing us to achieve animation in Firefox, since Firefox still has no support for SMIL animation.

I did some permutations on your provided source to see what gives better performance. I couldn't get any script version to run faster/smoother than a corresponding SMIL animation version.

Some suggestions:

1. combine the path elements into one by concatenating the d-attributes, one path element for the animated part, one path element for the static part
   
2. drop the style attributes
   
3. if you're still going with a script version insert only one <use> element instead of three elements
   
4. hubX/hubY are static, so hardcode them instead of doing parseFloat
   
5. try doing cloneNode on the turbine group instead of creating <use> elements, and build an array of the elements you want to animate as they are inserted, then update the transform attribute on those elements
   
   

Another option that I explored was to use a <pattern> of the turbine. A pattern is similar to a texture. Then you get faster tiling as well as animation synchronization almost for free. The downside is that using the pattern will be great if you use it on one element, and is best if you have a quite regular structure. Your example animated much more quickly when using a pattern containing the turbine on a rect covering the entire viewport.

In the end I would opt for a solution being something like this:

• a "turbine" group containing two subgroups, one animated "turbineBlades" and one static "turbineBase"
  
• the "turbineBlades" group gets an <animateTransform> element that does the rotation
  
• the init-function in script then inserts the desired number of <use> elements with xlink:href="#turbine"