Basically I'm wondering if anyone has any ideas on how to efficiently get a long shadow effect with an SVG: Example Image
My three ideas on how this might be possible:
Hella detailed gradient map, but is there a web-compliant way to export that to SVG from Illustrator? Blend Object SVG Filter that I'm not aware of? JS solution with something like SNAP SVG? My temporary solution was to export each puzzle piece from Illustrator with 75 layers of SVG paths making the shadow. The problem with so many layers, is that it really burdens browser rendering. Here's an Example
I've already employed the use element, but calling a symbol element with all 75 shadow paths.
In the original AI file, the effect is created using the blend mode, which, after some googling, I couldn't find an SVG filter equivalent to...but perhaps I'm missing something.
I was trying to figure on how to do it with a single path and gradient, but because of the "layered effect", it wouldn't be linear, so Id have to really map the hell out of it and didnt know if there's an easy way to do that.
Thanks for your help!