Color blending options (Multiply) in a web context?

We have a customer who has created an animated graphic (using AI & After Effects).

The graphic is essentially 3 overlapping donuts (can't post right now for "obvious reasons")

• Each donut isn't perfectly circular and is distorted in some unique way


• Each donut has a different linear color gradient on a different chord


• Each donut rotates, scales & pulses at a slightly different speed in the animation.

Their graphic was built using Illustrator (each donut being 1 layer), and then animated in After Effects. The result of the overlapping donuts is a nice color multiplication effect where the various sections of each donut overlaps.

I'm currently trying to port this to the web and running into major problems with regards the color blending & multiplication stuff.

Somethings I've tried.

• Export the AI file as an SVG and animate using RaphaelJS


• Export the paths directly from AI and render them with RaphaelJS


• Take the exported SVG and hack it to use FeImage & FeBlend filters

All of the above do not render as I would expect and from a little googling SVG color blending and the SVG spec in general is not fully implemented across the majority of browsers.

• 
  

  I've also tried export the individual layers as PNGs and then using CSS done:

  
  

  background: url('PNGs/L1.png') center center, url('PNGs/L2.png') center center, url('PNGs/L3.png') center center; background-repeat: no-repeat; background-blend-mode: multiply;

  
  

This kinda gets me in the right direction but: it seems to be completely broken in IE, and I can't get it to work where each PNG is the BG image on 1 of 3 different divs (which I need to do in order to animate the div individually)

Am I just barking up the wrong tree with this problem or is this something that there's a magic js graphics library out there that will fix all my woes ?