Zur Startseite - about-svg.de
  Theorie I
  ClipPath
  feTurbulence
  feDisplacement
  feGaussianBlur
   
   
   
   

 

 

 

feTurbulence

 

Die Perlin-Noise-Funktion ist die Grundlage dieses Filtereffektes. Es ist eine zufällige Berechnung realistischer Texturen. Das hier gezeigte Beispiel zeigt eine Wolkentransformation. Die zufälligen Berechnungen können außerdem gesteuert werden, durch im Quelltext eingebettete Operatoren und Frequenzen.

 

Beispiel:

 

 

 


Quellcode:
 
   
 

<!-- *** Himmel *** -->
<filter id="himmel" filterUnits="userSpaceOnUse" x="20" y="100" width="300" height="300">
<feTurbulence baseFrequency="0.05" numOctaves="9" seed="8" type="fractalNoise" result="turb1" />
<feFlood in="turb1" flood-color="#B22222" flood-opacity=".99" result="flood" />
<feComposite operator="in" in="flood" in2="turb1" />
</filter>
<!-- *** Sonne *** -->
<filter id="kugel" filterUnits="userSpaceOnUse" x="150" y="150" width="100" height="100">
<feTurbulence baseFrequency="0.1, 0.009" numOctaves="6" type="turbulence" result="turb2" />
<feFlood in="turb2" flood-color="white" result="flood" />
<feComposite operator="in" in="flood" in2="turb2" result="comp" />
<feComposite operator="in" in="comp" in2="SourceGraphic" result="comp" />
</filter>
<radialGradient id="verlauf" cx="200" cy="200" fx="170" fy="170" r="40" gradientUnits="userSpaceOnUse">
<stop offset="10%" stop-color="red" />
<stop offset="90%" stop-color="orange" />
</radialGradient>
<filter id="himmel2" filterUnits="userSpaceOnUse" x="20" y="340" width="300" height="60">
<feTurbulence baseFrequency="0.2" numOctaves="139" seed="8" type="fractalNoise" result="turb1" />
<feFlood in="turb1" flood-color="blue" flood-opacity=".99" result="flood" />
<feComposite operator="in" in="flood" in2="turb1" />
</filter>

<g id="meer" transform="scale(0.5,0.5) translate(40,-10)">
<rect x="20" y="100" width="300" height="300" fill="black" stroke="#fff" stroke-width="6"/>
<!-- *** Himmel bekommt Rechteck *** -->
<rect width="100%" height="100%" filter="url(#himmel)" stroke="black" stroke-width="4"/>
<circle id="schwarz" cx="200" cy="200" r="40" fill="url(#verlauf)" />
<!-- *** Filter fuer die Sonne *** -->
<circle cx="200" cy="200" r="40" filter="url(#kugel)" stroke="white" stroke-width="5" transform="rotate(30,200,200)"/>
<rect width="100%" height="10%" x="0" y="200" filter="url(#himmel2)" />
</g>

 

  nach oben 

 
 
  Zum Leipzig-Entertainer (SVG)  
     
  Zum Campusplan (SVG)  
     
  Zum SVG-Tutorial (SVG)  
     
  Zum Wankelmotor (SVG)