| <!DOCTYPE html> |
| <style> |
| .target { |
| display: inline-block; |
| width: 100px; |
| height: 100px; |
| background-color: red; |
| } |
| </style> |
| <div class="target" style="filter: url(#fn1)"></div> |
| <div class="target" style="filter: url(#fn2)"></div> |
| <div class="target" style="filter: url(#tb1)"></div> |
| <div class="target" style="filter: url(#tb2)"></div> |
| <svg height="0" color-interpolation-filters="sRGB"> |
| <!-- type=fractalNoise --> |
| <filter id="fn1" x="0" y="0" width="1" height="1"> |
| <feTurbulence type="fractalNoise" baseFrequency="-1 1"/> |
| <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.5, 0 0 1 0 0, 0 0 0 1 1"/> |
| </filter> |
| |
| <filter id="fn2" x="0" y="0" width="1" height="1"> |
| <feTurbulence type="fractalNoise" baseFrequency="1 -1"/> |
| <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.5, 0 0 1 0 0, 0 0 0 1 1"/> |
| </filter> |
| |
| <!-- type=turbulence --> |
| <filter id="tb1" x="0" y="0" width="1" height="1"> |
| <feTurbulence type="fractalNoise" baseFrequency="-1 1"/> |
| <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.5, 0 0 1 0 0, 0 0 0 1 1"/> |
| </filter> |
| |
| <filter id="tb2" x="0" y="0" width="1" height="1"> |
| <feTurbulence type="fractalNoise" baseFrequency="1 -1"/> |
| <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.5, 0 0 1 0 0, 0 0 0 1 1"/> |
| </filter> |
| </svg> |
