svg filters

bevel effect SVG filter

by Vitaliy

HTML

<svg viewbox="0,0, 400, 300">
  <text class="filtered" x="20" y="85">Beveled</text>
  <defs xmlns="http://www.w3.org/2000/svg"> 
    <filter id="filter" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
      <!--We create a heightmap by blurring the source: -->
      <feGaussianBlur stdDeviation="5" in="SourceAlpha" result="BLUR"/>
      <!-- We then define a lighting effect with a point light that is positioned at virtual 3D coordinates x: 40px, y: -30px, z: 30px: -->

      <feSpecularLighting surfaceScale="1" specularConstant="1" specularExponent="60" lighting-color="#0db9db" in="BLUR" result="SPECULAR">
      <fePointLight x="200" y="-150" z="1000" />
      </feSpecularLighting>
      <!-- We cut off the parts that overlap the source graphic… -->
      <feComposite operator="in" in="SPECULAR" in2="SourceAlpha" result="COMPOSITE"/>
      <!-- … and then merge source graphic and lighting effect: -->
      <feMerge>
          <feMergeNode in="SourceGraphic" />
          <feMergeNode in="COMPOSITE"/>
      </feMerge>
    </filter>
  </defs>
</svg>

CSS

.filtered{
        filter: url(#filter);
        fill: #11759a;
        font-family: 'Lemon', cursive;
        font-size: 100px;
      }