D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
erikhazzard
Full window
Github gist
Map Filter
<!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" 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> </defs> <rect width=300 height=200 x=30 y=30 fill="#8B6811" filter="url(#filter-map)" /> <circle cx=175 cy=135 r=50 fill="#336699" filter="url(#filter-map)" /> </svg> </body> </html>