Beispiel:SVG-text-filter-8.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">
 <style>

text { 

  font-family: sans-serif, Arial; 
  font-size: 240px;

}

.demo { 

  fill: gold;
  stroke: steelBlue;
  stroke-width: 9;

} svg { 

 max-height: 600px;

}

body { 

 max-width: 50em;
 margin-inline: auto;

}


</style> <title>SVG-Text mit filter - 8</title> </head>

<body>

Sprayeffekt mit feTurbulence

<svg viewBox="0 0 900 500"> <g filter="url(#spray)"> 

 <text fill="#c82f04" x="10" y="200">Spray it!</text>
 <text class="demo"   x="10" y="440">Spray it!</text>

</g> 

 <defs>
   <filter id="spray" filterUnits="userSpaceOnUse" x="0" y="-100" >
     <feTurbulence
         type="fractalNoise"
         baseFrequency="1.95"
         numOctaves="4"
         seed="11865"
         stitchTiles="noStitch" />
     <feComponentTransfer result="in2">
       <feFuncR type="linear" slope="2" intercept="-0.7" />
       <feFuncG type="linear" slope="1.5" intercept="-0.5" />
       <feFuncB type="linear" slope="1.5" intercept="-0.5"  />
       <feFuncA type="linear" slope="0" intercept="1" />
     </feComponentTransfer>
     <feDisplacementMap in="SourceGraphic" in2="in2" result="V"
         scale="20"
         xChannelSelector="R"
         yChannelSelector="G" />
   </filter>
 </defs>

</svg> </body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-text-filter-8.html&oldid=100028“