File:SVG filter feTurbulence.svg

• Description/Beschreibung:

English: Filter feTurbulence in SVG

Deutsch: Beispiele für den Filter feTurbulence in SVG. Links: Rechteck ohne Filter. Mitte: Filter feTurbulence vom Typ fractalNoise mit der Basis-Frequenz .1. Rechts: Filter feTurbulence vom Typ turbulence mit der Basis-Frequenz .2. Beide Filter sind mittels feComposite und feBlend auf die Rechtecke angewendet.

• Source: Own illustration, 2006
• Illustrator: Arne Nordmann (norro)

• Source code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320" height="240">
  <defs>
    <title>feTurbulence</title>
    <filter id="feTurb01" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency=".1" result="out1" />
      <feComposite in="out1" in2="SourceGraphic" operator="in" result="out2" />
      <feBlend in="SourceGraphic" in2="out2" mode="darken" result="out3" />
    </filter>
    <filter id="feTurb02" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feTurbulence baseFrequency=".2" numOctaves="2" seed="3" result="out1" />
      <feComposite in="out1" in2="SourceGraphic" operator="in" result="out2" />
      <feBlend in="SourceGraphic" in2="out2" mode="darken" result="out3" />
    </filter>
  </defs>
  <text x="30" y="20" style="fill:#000; font-size:24px; font-family:sans-serif;">feTurbulence</text>
  <rect x="15" y="40" width="170" height="150" style="fill:#ddf; stroke:#bbd; stroke-width:2px;" />
  <rect x="75" y="60" width="170" height="150" style="fill:#ddf; stroke:#bbd; stroke-width:2px; filter: url(#feTurb01)" />
  <rect x="135" y="80" width="170" height="150" style="fill:#ddf; stroke:#bbd; stroke-width:2px; filter: url(#feTurb02)" />
</svg>

iThe source code of this SVG is valid.

 

This vector image was created with a text editor.

This work has been released into the public domain by its author, norro. This applies worldwide. In some countries this may not be legally possible; if so: norro grants anyone the right to use this work for any purpose, without any conditions, unless such conditions are required by law.