Flood
<svg viewbox="0 0 600 600"> <defs> <filter id="solid"> <feFlood flood-color="#888"/> <feComposite in="SourceGraphic" operator="xor" /> </filter> </defs> <text filter="url(#solid)" font-size="100" x="100" y="300">Flood</text> </svg>
GaussianBlur
<svg viewbox="0 0 600 600"> <defs> <filter id="filter1"> <feGaussianBlur stdDeviation="10" /> </filter> </defs> <circle cx="300" cy="300" r="150" filter="url(#filter1)" /> </svg>
Offset, GaussianBlur, Blend
<svg viewbox="0 0 600 600"> <defs> <filter id="f2" width="200%" height="200%"> <feOffset result="offOut" dx="20" dy="20" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> <feBlend in="SourceGraphic" in2="blurOut" /> </filter> </defs> <circle cx="300" cy="300" r="150" stroke="green" stroke-width="1" fill="yellow" filter="url(#f2)" /> </svg>
Turbulence
<svg viewbox="0 0 600 600"> <defs> <filter id="turb1"> <feTurbulence baseFrequency="0.004" numOctaves="4" /> </filter> </defs> <rect height="100%" width="100%" filter="url(#turb1)" /> </svg>
<svg viewbox="0 0 600 600"> <defs> <filter id="turb2"> <feTurbulence baseFrequency="1,0" numOctaves="1" /> </filter> </defs> <rect height="100%" width="100%" filter="url(#turb2)" /> </svg>
<svg viewbox="0 0 600 600"> <defs> <filter id="turb3"> <feTurbulence baseFrequency="0,1" numOctaves="1" /> </filter> </defs> <rect height="100%" width="100%" filter="url(#turb3)" /> </svg>
Create your own turbulence filter with this
generator
.
Turbulence, DisplacementMap
<svg viewbox="0 0 600 600"> <defs> <filter id="displacementFilter"> <feTurbulence baseFrequency="0.05" numOctaves="2" /> <feDisplacementMap in="SourceGraphic" scale="50" /> </filter> </defs> <circle cx="300" cy="300" r="150" fill="blue" filter="url(#displacementFilter)" /> </svg>
Paper texture with Turbulence and DiffuseLighting
<svg viewbox="0 0 600 600"> <filter id='roughpaper' x='0%' y='0%' width='100%' height="100%"> <feTurbulence type="fractalNoise" baseFrequency='0.02' numOctaves="3" /> <feDiffuseLighting lighting-color='#fff' surfaceScale='2'> <feDistantLight azimuth='45' elevation='60' /> </feDiffuseLighting> </filter> <rect width="100%" height="100%" filter="url(#roughpaper)" /> </svg>
Cloudy Sky by finnhvman
<svg viewbox="0 0 600 600"> <linearGradient id="cloudGradient"> <stop stop-color="#579"/> <stop offset="1" stop-color="#248"/> </linearGradient> <filter id="cloudFilter"> <feTurbulence type="fractalNoise" baseFrequency=".008 .01" numOctaves="5"/> <feComponentTransfer> <feFuncA type="gamma" exponent="1.1"/> </feComponentTransfer> <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1 .5"/> <feBlend in2="SourceGraphic"/> </filter> <rect width="100%" height="100%" fill="url(#cloudGradient)" filter="url(#cloudFilter)"/> </svg>
Lake Reflection by finnhvman
<svg viewbox="0 0 600 600" style="background:linear-gradient(#135,#fbc,#135)"> <filter id="lakeFilter"> <feTurbulence type="fractalNoise" baseFrequency=".005 0" numOctaves="5"/> <feDisplacementMap in="SourceAlpha" scale="99"/> <feColorMatrix values="0 0 0 0 .01 0 0 0 0 .02 0 0 0 0 .02 0 0 0 -1 1"/> </filter> <use href="#e" y="-100%" transform="scale(1 -1)" filter="blur(3px)"/> <ellipse id="e" cx="50%" rx="63%" ry="43%" filter="url(#lakeFilter)"/> </svg>
Glow effect by Opher Vishnia
<svg viewbox="0 0 300 300"> <defs> <filter id="glow"> <fegaussianblur result="coloredBlur" stddeviation="4" /> <femerge> <femergenode in="coloredBlur"/> <femergenode in="coloredBlur"/> <femergenode in="coloredBlur"/> <femergenode in="SourceGraphic"/> </femerge> </filter> </defs> <circle cx="150" cy="150" r="100" style="fill:none; stroke:red; stroke-width:2; filter:url(#glow); "/> </svg>