I am trying to export SVGs out of Sketch using “Multiply” as the blending mode. Things look fine in the Scene thumbnail view, but the canvas itself does not retail the blend mode effect. What gives?
How does it look when previewing?
Hype doesn’t make any changes to your SVG file. The thumbnail generation is slightly different from how the scene area is rendered, but the best way to discover what SVG features are supported is to preview in a browser.
In my quick test, things seemed to work well so it would be helpful to see your SVG + Sketch file if you can share.
test-blend-sketch.zip (6.8 KB)
I should mention that I have the SVGGO plugin enabled in Sketch which is doing some behind the scenes magic during my SVG exports: https://github.com/BohemianCoding/svgo-compressor
Though I’m not seeing a difference between SVGs exported with and without this plugin enabled.
test-svg.hype.zip (17.5 KB)
Not working when I preview in Safari, Chrome or Firefox. Sketch and Hype files are attached.
Archive.zip (35.4 KB)
The issue is that you selected two layers in sketch and clicked ‘Export’. This will export 2 separate svg files. The way to retain the multiple blending you have setup is to first add those two combined shapes to a group, and then export that group as an SVG.
That won’t work - trying to animate each shape independantly in Hype! 
Ah hah!
Ok to get this work, you would need to manually apply the multiply css style to your blue c. Give it a ‘unique element ID’ to larget it:
#bluec {
mix-blend-mode: multiply !important;
}
Also, turn off Use Webkit Graphics Acceleration in the Document Inspector. Why it doesn’t work with that on is beyond me.
This does not appear to work in Chrome or Firefox.
svg blend test.hype.zip (42.3 KB)
More info: https://css-tricks.com/almanac/properties/m/mix-blend-mode/
Appreciate the help!