Litestone Litestone - 15 days ago 4
CSS Question

SVG Bevel effect for all edges



#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

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>

Comments