SVG/Tutorials/Muster/Texturen

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Muster
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer

20min

Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
• CSS
• SVG


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[Bearbeiten]

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[Bearbeiten]

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

Holz[Bearbeiten]

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:

Himmel, Wolken und Wasser[Bearbeiten]

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>

In diesem Beispiel wird mit dem Filter #cloud eine wolkenähnliche Textur erzeugt. Diese wird dann mit SMIL animiert.


Weblinks[Bearbeiten]

  1. codepen.io SVG Textures Paper