SVG/Tutorials/Muster/Texturen

Während Sie Hintergründe mit CSS nur flächig oder mit einem Farbverlauf füllen können, stehen Ihnen bei SVG eine Vielzahl von Möglichkeiten offen.

In den ersten beiden Teilen unserer Mini-Serie werden wiederkehrende geometrische Muster mit dem pattern-Element festgelegt und dann gekachelt wiedergegeben. In diesem Artikel werden unregelmäßige Texturen erzeugt, die natürlichen Oberflächen nachempfunden sind, jedoch trotzdem ohne extern referenzierte Grafiken auskommen. Dabei sehen Sie Anwendungsbeispiele für SVG-Filter.

Papier

Papierstruktur ansehen …

  <filter id="papier-1" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" />
    <feDiffuseLighting lighting-color="white" surfaceScale="2" result="diffLight">
      <feDistantLight azimuth="45" elevation="35"/>
    </feDiffuseLighting>
  </filter>

  <filter id="papier-2" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency="0.08" numOctaves="10" />
    <feDiffuseLighting lighting-color="white" surfaceScale="2" result="diffLight">
      <feDistantLight azimuth="45" elevation="35"/>
    </feDiffuseLighting>
  </filter>

In diesem Beispiel wird mit dem feTurbulence-Filter eine unregelmäßige Textur erzeugt. Mit feDiffuseLighting werden die Unebenheiten beleuchtet, sodass die Textur besser sichtbar wird.

Ein ähnliches Ergebnis erzielt Amelia Bellamy-Royds mit sehr viel mehr Filtern.^[1].

Metall

https://www.packtpub.com/books/content/inkscape-svg-filter-effects

Holz

Holzstruktur ansehen …

<filter id="wood-1">
	<feFlood x="0%" y="0%" width="100%" height="100%" flood-color="#ca6" result="one"/>
	<feTurbulence baseFrequency=".007,.25" numOctaves="1" seed="403" />
	<feColorMatrix type="matrix" result="turb1"
values="
	 1    0   0  0  0   
	 0   -1   0  0  0 
	 0    0  -1  0  0   
	 1   -1   1  0  0
"/>
	<feMerge>
		<feMergeNode in="one"/>
		<feMergeNode in="turb1"/>
	</feMerge>
</filter>

<filter id="wood-2" color-interpolation-filters="sRGB">
	<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
	<feDiffuseLighting diffuseConstant="1" surfaceScale="4" result="LightSource">
		<fePointLight y="0" z="100" x="50" />
	</feDiffuseLighting>
	<feTurbulence type="fractalNoise" baseFrequency="0.01 0.1" numOctaves="2" seed="2" result="WoodGrain" />
	<feColorMatrix result="result1" values="0" type="saturate" />
	<feBlend in="SourceGraphic" in2="result1" mode="darken" result="Color1" />
	<feBlend in="Color1" in2="LightSource" mode="multiply" result="Overlap" />
	<feComposite in="Overlap" in2="SourceAlpha" operator="in" result="EndResult" />
</filter>

Siehe auch:

In diesem Beispiel auf Wikimedia Commons verwendet User:CMGLEE trotzdem Rastergrafiken als Sprites.
http://www.vectordiary.com/illustrator/illustrator-tutorial-wood-grain/

Himmel, Wolken und Wasser

Mit Hilfe des FeTurbulence-Filters können Sie wie in diesem Beispiel unregelmäßige, wolkenähnliche Strukturen erzeugen.

Diese können sogar animiert werden:

Beispiel ansehen …

<filter id="cloud" color-interpolation-filters="sRGB" x="0%" y="0%" height="100%" width="100%">
  <feTurbulence type="fractalNoise" result="cloudbase" baseFrequency=".0025" numOctaves="5" seed="24"/>
  <feColorMatrix in="cloudbase" type="hueRotate" values="0" result="cloud">
    <animate attributeName="values" from="0" to="360" dur="20s" repeatCount="indefinite"/>
  </feColorMatrix>
  <feColorMatrix in="cloud" result="wispy" type="matrix" 
                            values="4 0 0 0 -1
                                    4 0 0 0 -1
                                    4 0 0 0 -1
                                    1 0 0 0 0   
                                    "/>
  
  <feFlood flood-color="#113388" result="blue"/>

  <feBlend mode="screen" in2="blue" in="wispy"/>
  
  <feGaussianBlur stdDeviation="4"/>
 
  <feComposite operator="in" in2="SourceGraphic"/>
  
</filter>