Search code examples
javascriptcsssvgadobe-illustratorsvg-filters

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:

  1. Hella detailed gradient map, but is there a web-compliant way to export that to SVG from Illustrator?
  2. Blend Object SVG Filter that I'm not aware of?
  3. 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 (similar to long shadow with text shadow here: http://creative-punch.net/2014/03/long-shadow-buttons-css3-sass/). 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!

<code>for some reason I need this in order to link to codepen. Ignore</code>
Solution

  • There is no way to do this in SVG without drawing a shadow per pixel of length in the shadow, or by just drawing the shadow directly. For the first case, you can do this using multiple offset shapes with decreasing fill opacities, or with a filter that layers in multiple drop shadows.

    (Photoshop has an extrusion control that automates this for you.)