SVG Bevel effect for all edges - html

Question

#logo {
position:relative;
left:20px;
top:20px
}
#logo .container {
height:200px;
width:200px;
top:50px;
left:50px
}
#logo .container, #logo .slice {
position:absolute;
}
#logo .slice {
height:100%;
width:100%;
}
<div id="logo">
<div class="container">
<div class="slice" id="one">
<svg height="200" width="200">
<polygon points="0,200 100,100 200,200" style="fill:green" />
</svg>
</div>
<div class="slice" id="two">
<svg height="200" width="200">
<polygon points="0,0 100,100 0,200" style="fill:blue" />
</svg>
</div>
<div class="slice" id="three">
<svg height="200" width="200">
<polygon points="0,0 100,100 200,0" style="fill:red" />
</svg>
</div>
<div class="slice" id="four">
<svg height="200" width="200">
<polygon points="200,0 100,100 200,200" style="fill:yellow" />
</svg>
</div>
</div>
</div>
I couldn't figure out how to make a bevel filter as in this logo. All three edges of each slice must be equally darker like the light source is projected right above each slice. Briefly, I am expecting an end result exactly the same with the logo in the link.
EDIT:
<svg>
<filter id="inset-shadow">
<feComponentTransfer in=SourceAlpha>
<feFuncA type="table" tableValues="1 0" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="5" />
<feOffset in="offsetblur2" dy="10" result="offsetblur" />
<feOffset dy="-10" result="offsetblur2" />
<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>
<polygon points="0,0 100,100 200,0" style="fill:red" filter="url(#inset-shadow)" />
</svg>
Something like this maybe but not enough dark?

Answer 1

Here's a bevel effect using a specular lighting filter:
<svg width="800px" height="600px" viewBox="0 0 200 150"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="MyFilter" height="220%">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="30" lighting-color="white"
result="specOut">
<fePointLight x="100" y="75" z="200"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="1" k2="1" k3="0" k4="0"/>
</filter>
</defs>
<rect x="1" y="1" width="600" height="800" fill="#888888" stroke="red" />
<g filter="url(#MyFilter)" >
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
</g>
</g>
</svg>
But you can do the same thing more elegantly just using composites and a blur.
<svg width="800px" height="600px" viewBox="0 0 200 150"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="MyFilter" height="220%">
<feFlood flood-color="black"/>
<feComposite operator="out" in2="SourceGraphic"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<rect x="1" y="1" width="600" height="800" fill="#888888" stroke="red" />
<g filter="url(#MyFilter)" >
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
</g>
</g>
</svg>