Beispiel:SVG-Filter-feTurbulence-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">  
  <style>
svg {
  width: 96%;
  height: 650px;
  padding:0;
  margin:0;
  background: white;
}

text {
   font-family: sans-serif; 
   font-size: 10px;
}

tspan {
  font-style: italic;
  fill: #337599;
}	

</style>
<title>SVG-Filter feTurbulence</title>
</head>

<body>

<h1>SVG-Filter feTurbulence</h1>

<svg viewBox="0 0 880 650">
<defs>
  <symbol id="rechteck">
    <rect x="10" y="80" width="100" height="100"/>
  </symbol>
  	
  <filter id="turb1">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.01"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb2">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb3">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.2"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
    <filter id="turb4">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.4"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
    <filter id="turb5">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb6">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1"
      numOctaves="2"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb7">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1"
      numOctaves="4"
      in="SourceGraphic"/>
  </filter>
  
    <filter id="turb8">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1"
      numOctaves="8"
      in="SourceGraphic"/>
  </filter>

  <filter id="turb9">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.1"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb10">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.1"
      numOctaves="2"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb11">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.1"
      numOctaves="4"
      in="SourceGraphic"/>
  </filter>
  
    <filter id="turb12">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.1"
      numOctaves="8"
      in="SourceGraphic"/>
  </filter>
  
  
    <filter id="turb21">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.04,0.1"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb22">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1,0.01"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  

</defs>


  <g transform="translate(50,20)">
    <use href="#rechteck" style="filter: url(#turb1);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.01</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>

  <g transform="translate(200,20)">
    <use href="#rechteck" style="filter: url(#turb2);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>
  
  <g transform="translate(350,20)">
    <use href="#rechteck" style="filter: url(#turb3);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.2</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>
  
  <g transform="translate(500,20)">
    <use href="#rechteck" style="filter: url(#turb4);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.4</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>
  
  <g transform="translate(50,220)">
    <use href="#rechteck" style="filter: url(#turb5);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>

  <g transform="translate(200,220)">
    <use href="#rechteck" style="filter: url(#turb6);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>2</tspan>"</text>
  </g>
  
  <g transform="translate(350,220)">
    <use href="#rechteck" style="filter: url(#turb7);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>4</tspan>"</text>
  </g>
  
  <g transform="translate(500,220)">
    <use href="#rechteck" style="filter: url(#turb8);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>8</tspan>"</text>
  </g>
  
  <g transform="translate(50,420)">
    <use href="#rechteck" style="filter: url(#turb9);"/>
    <text x="0" y="20">type="<tspan>fractalNoise</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>

  <g transform="translate(200,420)">
    <use href="#rechteck" style="filter: url(#turb10);"/>
    <text x="0" y="20">type="<tspan>fractalNoise</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>2</tspan>"</text>
  </g>
  
  <g transform="translate(350,420)">
    <use href="#rechteck" style="filter: url(#turb11);"/>
    <text x="0" y="20">type="<tspan>fractalNoise</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>4</tspan>"</text>
  </g>
  
  <g transform="translate(500,420)">
    <use href="#rechteck" style="filter: url(#turb12);"/>
    <text x="0" y="20">type="<tspan>fractalNoise</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>8</tspan>"</text>
  </g>  
  
  
    <g transform="translate(720,20)">
    <use href="#rechteck" style="filter: url(#turb21);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.04,0.1</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>
  
  <g transform="translate(720,220)">
    <use href="#rechteck" style="filter: url(#turb22);"/>
    <text x="0" y="20">type="<tspan>turbulence</tspan>"</text>
    <text x="0" y="40">baseFrequency="<tspan>0.1,0.01</tspan>"</text>
    <text x="0" y="60">numOctaves="<tspan>1</tspan>"</text>
  </g>

</svg>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-Filter-feTurbulence-1.html&oldid=86802“