Long shadow effect in SVG for web
Basically I'm wondering if anyone has any ideas on how to effectively get the long shadow effect using SVG: 
My three ideas on how this is possible:
- Detailed Hella gradient map, but is there a way to export to SVG from Illustrator?
- Blend Object SVG Filter I Don't Know About?
- JS solution with something like SNAP SVG?
My workaround was to export each puzzle piece from Illustrator with 75 layers of SVG tracks, creating a shadow (similar to a long shadow with a shadow tap here: http://creative-punch.net/2014/03/long-shadow-buttons-css3 -sass / ). The problem with so many layers is that it really burdens the rendering of the browser. Here's an example
I have used the element of use , but it causes the element symbol with all 75 shady ways.
In the original AI file, the effect is created using a blend mode, which after some searching could not find the equivalent of an SVG filter ... but maybe I was missing something.
I was trying to figure out how to do this with one path and a gradient, but due to the "layered effect" it won't be linear, so Id have to really render the hell out of it and didn't know if there was an easy way to do it.
Thank you for your help!
<code>for some reason I need this in order to link to codepen. Ignore</code>
source to share
There is no way in SVG to do this without drawing the shadow a pixel length in the shadow, or simply drawing the shadow directly. In the first case, you can do this by using multiple displacement shapes with a decrease in fill fill or with a filter that contains layers in multiple drop shadows.
(Photoshop has an extrusion control that automates this for you.)
source to share