SVG feTurbulence滤镜fractalNoise和turbulence类型实例页面

回到相关文章 »

效果：

turbulence

fractalNoise

代码：

HTML代码：
<h4>turbulence</h4>
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise" x="0" y="0" width="100%" height="100%">
    <feTurbulence id="feTurbulence" baseFrequency="0.02" type="turbulence" />
  </filter>

  <rect x="0" y="0" width="300" height="200" style="filter: url(#noise);" />
</svg>
<h4>fractalNoise</h4>
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feTurbulence id="feTurbulence" baseFrequency="0.02" type="fractalNoise" />
  </filter>

  <rect x="0" y="0" width="300" height="200" style="filter: url(#noise2);" />
</svg>