| <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> |
| <defs> |
| <filter id="blend" color-interpolation-filters="linearRGB" x="-15%" y="-15%" width="130%" height="130%"> |
| <feGaussianBlur stdDeviation="5 5" color-interpolation-filters="sRGB"/> |
| <feBlend in2="SourceGraphic" mode="screen" color-interpolation-filters="linearRGB"/> |
| </filter> |
| |
| <filter id="blend-s" color-interpolation-filters="sRGB" x="-15%" y="-15%" width="130%" height="130%"> |
| <feGaussianBlur stdDeviation="5 5" color-interpolation-filters="linearRGB"/> |
| <feBlend in2="SourceGraphic" mode="screen" color-interpolation-filters="sRGB"/> |
| </filter> |
| |
| <filter id="lighting" color-interpolation-filters="linearRGB" x="0%" y="0%" width="100%" height="100%"> |
| <feSpecularLighting color-interpolation-filters="sRGB"> |
| <feSpotLight pointsAtX="160" pointsAtY="130" pointsAtZ="0" specularExponent="1" limitingConeAngle="20" x="0" y="0" z="10" color-interpolation-filters="linearRGB"/> |
| </feSpecularLighting> |
| <feColorMatrix type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1" color-interpolation-filters="linearRGB"/> |
| <feBlend in2="SourceGraphic" mode="multiply" color-interpolation-filters="linearRGB"/> |
| </filter> |
| |
| <filter id="lighting-s" color-interpolation-filters="sRGB" x="0%" y="0%" width="100%" height="100%"> |
| <feSpecularLighting color-interpolation-filters="linearRGB"> |
| <feSpotLight pointsAtX="160" pointsAtY="130" pointsAtZ="0" specularExponent="1" limitingConeAngle="20" x="0" y="0" z="10" color-interpolation-filters="sRGB"/> |
| </feSpecularLighting> |
| <feColorMatrix type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1" color-interpolation-filters="sRGB"/> |
| <feBlend in2="SourceGraphic" mode="multiply" color-interpolation-filters="sRGB"/> |
| </filter> |
| |
| <filter id="merge" x="0%" y="0%" width="120%" height="120%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0" result="trans" color-interpolation-filters="linearRGB"/> |
| <feOffset dx="5" dy="5" in="trans" result="offset1" color-interpolation-filters="linearRGB"/> |
| <feOffset dx="10" dy="10" in="trans" result="offset2" color-interpolation-filters="linearRGB"/> |
| <feOffset dx="15" dy="15" in="trans" result="offset3" color-interpolation-filters="linearRGB"/> |
| <feMerge color-interpolation-filters="linearRGB"> |
| <feMergeNode in="trans" color-interpolation-filters="linearRGB"/> |
| <feMergeNode in="offset1" color-interpolation-filters="linearRGB"/> |
| <feMergeNode in="offset2" color-interpolation-filters="linearRGB"/> |
| <feMergeNode in="offset3" color-interpolation-filters="linearRGB"/> |
| </feMerge> |
| </filter> |
| |
| <filter id="merge-s" color-interpolation-filters="sRGB" x="0%" y="0%" width="120%" height="120%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0" result="trans"/> |
| <feOffset dx="5" dy="5" in="trans" result="offset1"/> |
| <feOffset dx="10" dy="10" in="trans" result="offset2"/> |
| <feOffset dx="15" dy="15" in="trans" result="offset3"/> |
| <feMerge> |
| <feMergeNode in="trans"/> |
| <feMergeNode in="offset1"/> |
| <feMergeNode in="offset2"/> |
| <feMergeNode in="offset3"/> |
| </feMerge> |
| </filter> |
| </defs> |
| </svg> |
| <style> |
| img { |
| margin: 10px; |
| } |
| </style> |
| <img src="resources/reference.png"> |
| <img style="filter: url(#blend);" src="resources/reference.png"> |
| <img style="filter: url(#blend-s);" src="resources/reference.png"> |
| <img style="filter: url(#lighting);" src="resources/reference.png"> |
| <img style="filter: url(#lighting-s);" src="resources/reference.png"> |
| <img style="filter: url(#merge);" src="resources/reference.png"> |
| <img style="filter: url(#merge-s);" src="resources/reference.png"> |
| |