CODEWITHSUNDEEP
htmlcsssvg
Surender Thakran
Surender Thakran

Reputation: 4054

How to make non drop shadows in SVG?

I need to make the following shape with shadows using SVG: enter image description here

I have the following SVG for the shape:

<svg style="overflow:visible; margin-left:136px; margin-top:59px; " height="188" width="212">
    <path d=" M 105.3,0  C 47.2,0 0,41.8 0,93.3  C 0,144.9 47.2,186.7 105.3,186.7  C 163.5,186.7 210.7,144.9 210.7,93.3  C 210.7,41.8 163.5,0 105.3,0  L 105.3,0 " x="0.5" y="0.5" style="fill:yellow; stroke-width:1; stroke:#548dd4; "></path>
    <path d=" M 71.6,55.7  C 65.5,55.7 60.6,60 60.6,65.4  C 60.6,70.8 65.5,75.1 71.6,75.1  C 77.6,75.1 82.6,70.8 82.6,65.4  C 82.6,60 77.6,55.7 71.6,55.7  L 71.6,55.7 " x="0.5" y="0.5" style="fill:yellow; stroke-width:1; stroke:#548dd4; fill:none; "></path>
    <path d=" M 139.1,55.7  C 133,55.7 128.1,60 128.1,65.4  C 128.1,70.8 133,75.1 139.1,75.1  C 145.1,75.1 150.1,70.8 150.1,65.4  C 150.1,60 145.1,55.7 139.1,55.7  L 139.1,55.7 " x="0.5" y="0.5" style="fill:yellow; stroke-width:1; stroke:#548dd4; fill:none; "></path>
    <path d=" M 48.4,134  C 86.3,157.2 124.3,157.2 162.3,134 " x="0.5" y="0.5" style="fill:yellow; stroke-width:1; stroke:#548dd4; fill:none; "></path>
</svg>

But now I am having trouble with making the shadow for my shape? I know how to make a drop shadow for a single shape but in this case my shape is a combination of many paths. Even if I can manage to make a shadow for the shape using filters but how do I skew the shadow to look like an ellipse using filters?

Note: My SVGs are being generated by a code so solutions like: "use the path of the biggest shape to make shadows" won't work. I can't know for sure which path would make the shadow or whether the shadow would be a result of multiple overlapping paths forming a shadow matching none of the paths.

I am thinking of putting all my paths inside a group and somehow making a shadow of it but I don't know how to do that.

Upvotes: 1

Views: 228

Answers (2)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

You can probably make it work like this:

<defs>
  <filter id="getalpha">
    <feOffset in="SourceAlpha"/>
  </filter>
</defs>
<g id="shapes">
  ... your shapes ...
</g>
<use xlink:href="#shapes" 
     transform="... your translate/skew here ..." 
     filter="url(#getalpha)"/>

The <use> is for skewing the filter results. The filter is for extracting the alphachannel of the <g> element (the shapes you have). You may want to use feColorMatrix or similar instead of feOffset to tweak how black you want the shadow to be.

Upvotes: 4

nixkuroi
nixkuroi

Reputation: 2269

First of all I'd recommend getting rid of all the paths except the smile and replacing them with circles. They're a lot easier to read and more efficient to use.

In order to achieve the shadow you want, you should be able to paste this code at the bottom beneath your paths.

<ellipse cx="-50" cy="230" rx="100" ry="50"
style="fill:lightgrey;stroke:lightgrey;stroke-width:2" 
transform="rotate(-15 0 0)" />

Upvotes: 0

Related Questions