Beispiel:SVG-text-filter-6.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<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>
text {
  font-family: Garamond;
  font-size: 250px;
}  
body {
	background: black;
color: white;
}
</style>
  <title>SVG-Texteffekte 15</title>
</head>
 
<body>
  <h1>Beispiel: Text mit Gold und Silber-Look</h1>
 
  <svg viewBox="0 0 880 600">
 
    <defs>
        <filter id="edel" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="500">
			<feFlood flood-color="black"  result="textur"/>
            <feMerge result="texturUndGrafik">
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
 
            <feDiffuseLighting in="textur" surfaceScale="2" lighting-color="white"
                          diffuseConstant="1" result="backgroundDiff">
                <feSpotLight id="spotLight" x="50" y="50" z="150"
                             pointsAtX="150" pointsAtY="150" pointsAtZ="0"
                             specularExponent="8" />
            </feDiffuseLighting>
 
            <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="blur"/>
            <feDiffuseLighting in="blur" surfaceScale="6" lighting-color="white"
                          diffuseConstant="1.2" result="foregroundDiffAll">
                <feDistantLight id="distantLight" azimuth="-135" elevation="40" />
            </feDiffuseLighting>
            <feComponentTransfer>
                <feFuncR type="gamma" amplitude="1" exponent="3" offset="0"/>
                <feFuncG type="gamma" amplitude="1" exponent="3" offset="0"/>
                <feFuncB type="gamma" amplitude="1" exponent="3" offset="0"/>
            </feComponentTransfer>
            <feComposite operator="in" in2="SourceAlpha"/>
            <feConvolveMatrix order="3" kernelMatrix="0.0625 0.0625 0.0625
                                                     0.0625  0.5    0.0625
                                                     0.0625  0.0625 0.0625"
                                                       result="foregroundDiff"/>
 
            <feMerge result="diff">
                <feMergeNode in="backgroundDiff" />
                <feMergeNode in="foregroundDiff" />
            </feMerge>
 
            <feColorMatrix type="luminanceToAlpha" in="diff" result="screenMask"/>
            <feComponentTransfer result="multiplyMask">
                <feFuncA type="linear" slope="-1" intercept="1"/>
            </feComponentTransfer>
 
            <feBlend mode="screen" in2="texturUndGrafik" in="diff" result="screen"/>
            <feBlend mode="multiply" in2="texturUndGrafik" in="diff" result="multiply"/>
 
            <feComposite operator="in" in="screen" in2="screenMask" result="maskedScreen"/>
            <feComposite operator="in" in="multiply" in2="multiplyMask" result="maskedMultiply"/>
 
            <feComposite operator="arithmetic" in="maskedScreen" in2="maskedMultiply"
                        k1="0" k2="1" k3="1" k4="0" result="background" />
 
            <feMorphology operator="dilate" in="SourceAlpha" radius="4" />
            <feGaussianBlur stdDeviation="4" result="blur"/>
            <feOffset id="offset" dx="12" dy="12" result="offsetBlur"/>
            <feComposite in2="SourceAlpha" operator="out" result="shadow" />
 
            <feMerge>
                <feMergeNode in="background" />
                <feMergeNode in="shadow"/>
            </feMerge>
        </filter>
 
    </defs>
 
  <text x="0" y="200" fill="silver" filter="url(#edel)">Silber &</text>
  <text x="0" y="200" fill="gold" filter="url(#edel)" transform="translate(0,300)">Gold</text>
 
</svg>
 
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-text-filter-6.html&oldid=100022“