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>

Beispiel: Text mit Gold und Silber-Look

 <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“