D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
erikhazzard
Full window
Github gist
Filter With Mask
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <style> html, body { background: #ffffff; font-family: Helvetica, Arial, Tahoma, sans-serif; margin: 0; padding: 0; } path { fill: none; stroke: #343434; } .result { fill: none; stroke: #343434; stroke-width: 4px; } h1,h2,h3 { padding-left: 140px; padding-top: 0px; } </style> </head> <body> <svg xmlns='https://www.w3.org/2000/svg' xmlns:xlink= 'https://www.w3.org/1999/xlink' height=400 width=600> <defs> <filter id="filter-map-2" x="-0.15000001" y="-0.15000001" width="1.3" height="1.3" color-interpolation-filters="sRGB" > <feGaussianBlur stdDeviation="4" in="SourceGraphic" result="result1" id="feGaussianBlur4202" /> <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="4" result="result0" id="feTurbulence4204" /> <feDisplacementMap in2="result0" scale="20" xChannelSelector="R" yChannelSelector="G" in="result1" result="result2" id="feDisplacementMap4206" /> <feGaussianBlur stdDeviation="3" in="SourceGraphic" result="result4" id="feGaussianBlur4208" /> <feComposite in2="result2" operator="arithmetic" k1="1.5" k2="-0.25" k3="0.5" k4="0" in="result4" result="result5" id="feComposite4210" /> </filter> <mask id="mask-filter"> <rect x=100 y=70 width=50 height=70 fill="#ffffff" filter="url(#filter-map-2)" /> <circle cx=200 cy=180 r=20 fill="#ffffff" filter="url(#filter-map-2)" /> </mask> </defs> <rect width=300 height=200 x=30 y=30 fill="#8B6811" filter="url(#filter-map-2)" /> <rect x=50 y=50 width=200 height=150 fill="#336699" mask="url(#mask-filter)" /> </svg> </body> </html>