Create a relief effect in SVG

A simple example of a relief effect in SVG. 
<!DOCTYPE html>
<html>
<body>

    <svg width="500" height="200">
        
        <defs>
            <filter id="Filter" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="200">
              <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur" />
              <feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
              <feSpecularLighting in="blur" surfaceScale="4" specularConstant=".85" specularExponent="25" lighting-color="#cccccc" result="specOut">
                <fePointLight x="-5000" y="-10000" z="20000" />
              </feSpecularLighting>
            </filter>
        </defs>
            <rect x="1" y="1" width="500" height="200" fill="#" />
        <g filter="url(#Filter)">
            <circle cx="350" cy="100" r="70" fill="red" stroke="black" stroke-width="5" /> 
            <text fill="#FFFFFF" stroke="black" font-size="60" font-family="Verdana" x="50" y="120">TIZEN</text>
        </g>

    </svg>

</body>
</html>
List

Responses

0 Replies