Inset shadows on svg are just acting as an outline

Question

I'm trying to add some inset shadows to my svg, to make it look more like this

Instead of like this

I tried adding an inset shadow to every path (filter="url(#inset-shadow)"), using the filter pattern I got from this answer and have listed below, but all it ends up doing is kind of giving each path an outline. You can check the code at this fiddle to see what I'm talking about.

<filter id="inset-shadow">

    <feComponentTransfer in="SourceAlpha" result="inset-selection">
        <feFuncA type="discrete" tableValues="0 1 1 1 1 1" />
    </feComponentTransfer>

    <feComponentTransfer in="SourceGraphic" result="original-no-fill">
        <feFuncA type="discrete" tableValues="0 0 1" />
    </feComponentTransfer>

    <feColorMatrix type="matrix" in="original-no-fill" result="new-source-alpha" values="0 0 0 0 0
                      0 0 0 0 0
                      0 0 0 0 0
                      0 0 0 1 0" />

    <feGaussianBlur in="new-source-alpha" result="blur" stdDeviation="5" />
    <feGaussianBlur in="new-source-alpha" result="blur2" stdDeviation="10" />
    <feGaussianBlur in="new-source-alpha" result="blur3" stdDeviation="15" />
    <feMerge result="blur">
        <feMergeNode in="blur" mode="normal" />
        <feMergeNode in="blur2" mode="normal" />
        <feMergeNode in="blur3" mode="normal" />
    </feMerge>

    <feComposite operator="in" in="inset-selection" in2="blur" result="inset-blur" />

    <feComposite operator="over" in="original-no-fill" in2="inset-blur" />
</filter>

How can I add inset shadows to my shapes, to make my svg look more like the image at the top of this post?

Answer 1

The one you are using may have been failing because it was intended for transparent paths. I didn't spend much time working out what is wrong.

In any case, here's one I've created, that might be a bit easier to understand and tinker with.

<svg viewBox="0 0 200 200" width="400">

  <defs>
  <filter id="inset-shadow" x="-50%" y="-50%" width="200%" height="200%">

    <!-- change this to desired inset blur colour -->
    <feFlood x="0%" y="0%" width="100%" height="100%" flood-color="black" result="flood"/>
    <!-- cut a hole out of the flood fill where out shape is -->
    <feComposite operator="out" in="flood" in2="SourceAlpha" result="outside" />

    <!-- stack blurs to get a better effect -->
    <feGaussianBlur in="outside" result="blur" stdDeviation="5" />
    <feGaussianBlur in="outside" result="blur2" stdDeviation="10" />
    <feGaussianBlur in="outside" result="blur3" stdDeviation="15" />
    <feMerge result="blur">
        <feMergeNode in="blur" mode="normal" />
        <feMergeNode in="blur2" mode="normal" />
        <feMergeNode in="blur3" mode="normal" />
    </feMerge>

    <!-- clip the full blur against the shape to retain just the part inside our shape -->
    <feComposite operator="in" in="blur" in2="SourceGraphic" result="inset-blur" />
    <!-- blend with our original graphic to create the final result -->
    <feBlend in="SourceGraphic" in2="inset-blur" mode="multiply"/>
  </filter>
  </defs>
  
  
  <rect x="50" y="50" width="100" height="100" fill="linen" filter="url(#inset-shadow)"/>
</svg>

And here is a modified version of your fiddle with this filter applied.

You may want to tinker with the stdDeviation values to adjust the size of your inset blur.