Inset shadow only on 3 sides SVG - html

Question

I am trying to get an inset shadow only on 3 sides (top, left and right) using SVG filters. Please see the code below which adds inset shadow on all the four sides and see if you can help me modify it to get a shadow only on 3 sides. Thank you!
<svg>
<filter id="inset-shadow" x="-50%" y="-1" width="200%" height="205%">
<feComponentTransfer in=SourceAlpha>
<feFuncA type="table" tableValues="1 0 0 0 0 0 0" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="5"/>
<feOffset dx="0" dy="0" result="offsetblur"/>
<feFlood flood-opacity="0.9" flood-color="rgb(20, 0, 0)" result="color"/>
<feComposite in2="offsetblur" operator="in"/>
<feComposite in2="SourceAlpha" operator="in"/>
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode />
</feMerge>
</filter>
<filter id="inset-shadow1" x="-50%" y="0" width="200%" height="200%">
<feComponentTransfer in=SourceAlpha>
<feFuncA type="table" tableValues="1 0" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="5"/>
<feOffset dx="0" dy="-1" result="offsetblur"/>
<feFlood flood-color="rgb(20, 0, 0)" result="color"/>
<feComposite in2="offsetblur" operator="in"/>
<feComposite in2="SourceAlpha" operator="in" />
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode />
</feMerge>
</filter>
</svg>

Answer 1

Just adjust the filter region coordinates so that they line up with the left or top edges of the source graphic and adjust the width/height so that they're not clipping the right/bottom edge. Like so:
<svg width="800px" height="600px">
<defs>
<filter id="inset-shadow" x="0%" y="-100%" width="200%" height="205%">
<feComponentTransfer in=SourceAlpha>
<feFuncA type="table" tableValues="1 0 0 0 0 0 0" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="5"/>
<feOffset dx="0" dy="0" result="offsetblur"/>
<feFlood flood-opacity="0.9" flood-color="rgb(20, 0, 0)" result="color"/>
<feComposite in2="offsetblur" operator="in"/>
<feComposite in2="SourceAlpha" operator="in"/>
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode />
</feMerge>
</filter>
<filter id="inset-shadow1" x="-100%" y="0%" width="250%" height="200%">
<feComponentTransfer in=SourceAlpha>
<feFuncA type="table" tableValues="1 0" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="5"/>
<feOffset dx="0" dy="-1" result="offsetblur"/>
<feFlood flood-color="rgb(20, 0, 0)" result="color"/>
<feComposite in2="offsetblur" operator="in"/>
<feComposite in2="SourceAlpha" operator="in" />
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode />
</feMerge>
</filter>
</defs>
<rect filter="url(#inset-shadow)" fill="white" x="100" y="100" width="200" height="200"/>
<rect filter="url(#inset-shadow1)" fill="white" x="100" y="400" width="200" height="200"/>
</svg>