A 3D shadow effect can be achieved by
drawing two objects - the sharp "original" on the top
of the "shadow" (just the same object, but blurred
using feGaussianBlur
and moved a little bit).
The shadow is then skewed - this resembles a projection.
In this example the shadow is flipped horizontally first
and then skewed horizontally.
Output
 |
| SVG version |
Source
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" >
<defs>
<filter id="filter" filterRes="100" x="0" y="0">
<feGaussianBlur stdDeviation="2 4"/>
<feOffset dx="4" dy="4"/>
</filter>
</defs>
<g transform="scale(-1,1) translate(-200, 0) skewX(45)">
<rect x="40" y="20" width="50" height="50" fill="grey" filter="url(#filter)"/>
</g>
<rect x="20" y="20" width="50" height="50" fill="blue" stroke="black"/>
</svg>