Tutorial by Examples

<svg width="900px" height="400px" viewBox="0 0 900 400"> <defs> <filter id="basicGaussian"> <feGaussianBlur stdDeviation="5"/> </filter> </defs> <image xlink:href=&q...

<svg width="900px" height="400px" viewBox="0 0 900 400"> <defs> <filter id="xAxisGaussian"> <feGaussianBlur stdDeviation="5 0"/> </filter> </defs> <image xlink:href=...

<svg width="900px" height="400px" viewBox="900 400"> <defs> <filter id="GaussianHardEdge" x="0%" y="0%" width="100%" height="100%"> <feGaussianBlur stdDeviation="5"/&gt...

<svg width="900px" height="400px" viewBox="900 400"> <defs> <filter id="GaussianHardEdge" > <feConvolveMatrix order="3" kernelMatrix=" 1 1 1 1 1 1 ...

<svg width="900px" height="400px" viewBox="0 0 900 400"> <defs> <filter id="BokehBlur" color-interpolation-filters="sRGB"> <feGaussianBlur stdDeviation="2" result="blurSource"/> <feCol...

<svg width="800px" height="600px"> <defs> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> <feOffset dx="5" dy="5" result="offsetblur"/> <f...

<svg width="800px" height="600px"> <defs> <filter id="inner-glow"> <feFlood flood-color="red"/> <feComposite in2="SourceAlpha" operator="out"/> <feGaussianBlur stdDeviation="2" r...

<svg width="800px" height="600px"> <defs> <filter id="complex-shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%"> <!-- Take source alpha, offset it by angle/...

<svg width="800px" height="600px"> <defs> <filter id="greyscale"> <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0...

<svg width="800px" height="600px"> <defs> <filter id="greyscale"> <feColorMatrix type="matrix" values="0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 ...

<svg width="800px" height="600px"> <defs> <filter id="greyscale"> <feColorMatrix type="matrix" values=".2 .2 .2 0 0 .6 .6 .6 0 0 .2 .2 .2 0 0 ...

<svg width="800px" height="600px"> <defs> <filter id="focus-blur" > <feDiffuseLighting result = "diffOut" diffuseConstant = "1" lighting-color="white"> <feSpotLight id="spotlight" x =...

<svg width="800px" height="600px" > <defs> <filter id="posterize" color-interpolation-filters="sRGB"> <feComponentTransfer> <feFuncR type="discrete" tableValues="0 0.25 0.75 1.0"/> ...

This filter selects only the high luminance areas of a source graphic, blurs the contents and composites the blurred content on top of the original. <svg width="800px" height="600px"> <defs> <filter id="highlightblur" color-interpolation-fi...