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")
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.
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 ?
The CSS blend modes are only available in the latest browsers, so if the color effects are essential that isn't really an option. The only color multiplication effect that has anywhere decent browser support is SVG filters (<feBlend>).
One difficulty of using filters, however, is that there currently isn't decent browser support for combining multiple elements from the same file in a filter. None of the browsers support the SVG1.1 enable-background option for blending one element with the elements behind it (it will be replaced by the isolation feature in the new CSS Blending spec). The <feImage> filter element could be used to import a fragment of your SVG into the filter for another element, but that use isn't supported in Firefox (which only allows it to be used for complete image files).
So, your strategy would be:
Create separate files (SVG or PNG) for each of your three colored donuts.
Create an empty container element that you will pass to the filter. Make sure you set the filter region to the correct dimensions for the output graphic.
In the filter, use three <feImage> elements to load your component graphics. Set the x, y, width, and height parameters to the initial overlapping positions of the three graphics.
Combine the <feImage> results using two <feBlend> operations
Animate the parameters of <feImage> using JavaScript or SMIL with JavaScript backup for IE.
Limitations:
Filters operate on pixel graphics, you can't do any transformations other than setting the position and size of the imported images. If you need other animations, you'd need to do them in the source image files.
You're loading four separate files. Might want to look into data URIs to cut down the total load time.
If you're okay with only supporting the latest browsers (with others seeing the shapes but not the color multiply effect), you should be able to do this with CSS Blending on any of
SVG elements, with animated transformations
Multiple HTML images or elements with CSS backgrounds (animating the CSS transform property, possibly with fallback to animating absolute position properties)
A single HTML element with multiple CSS background images, animated using the background-position property (CSS or JavaScript). The animation is trickier here, since the positions of all the layers are controlled through a single CSS property. It also wouldn't be hardware-accelerated like a transformation, which can be implemented using independent layers combined by the video card.
However, note that there are two different blend mode properties:
background-blend-mode controls how layered backgrounds on an element blend into each other. It can be a list of values for each image in your background. It has no effect on blending between separate elements (HTML or SVG).
mix-blend-mode controls how a given element is blended into the content behind, subject to the limitations of the isolation property (which isolates all child content from blending with the rest of the web page) or other properties which create a stacking context.
More on CSS Blending
caniuse.com browser support for CSS Blending