Long Shadow Effect in SVG for Web

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!

Answer

You can use SVG filters. I am just not sure its any lighter in terms of speed. Having 75 paths is nothing to the computer, but even a few filters can take the computer to its knees. (this is highly implementation dependent tough.)

Here is one way (10 px long shadow):

<filter id="Long_Shadow_10" >
    <feConvolveMatrix order="20"  in="SourceAlpha" result ="conv_out"
        kernelMatrix=" 
            1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1
            " />
</filter>

Now you will still need to mask it with a bounding volume. Not very practical but works. (you may need to dilate before blur etc…) Bigger kernel columns longer shadow, slower performance.

example result

Image 1: result f a 20 px directional shadow.

Final option use bitmaps masked by vectors. This is somewhat faster as it does not need to be recalculated every time. Even a fairly low resolution image would suffice if you mask it by vectors.

Attribution
Source : Link , Question Author : leggomuhgreggo , Answer Author : joojaa

Leave a Comment