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

text { 

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

} .demo { fill: gold; stroke: steelBlue; stroke-width: 6; }

body { max-width: 50em; margin-inline: auto; }

</style> <title>SVG-Texteffekt-16</title> </head>

<body>

Vom Krümelmonster abgebissen!

<svg viewBox="0 0 1100 720"> <g filter="url(#gerissen)"> 

<text fill="#c82f04" transform="translate(10,210)">🍩 Eat me!</text>
 <text class="demo" transform="translate(10,450)">🍪 Eat me!</text>

</g> 

 <text class="demo" transform="translate(10,670)">🍪 Eat me!</text>

 <defs>
   <filter id="gerissen" filterUnits="userSpaceOnUse" x="0" y="-100">
     <feTurbulence result="Rauschen" baseFrequency="0.08" numOctaves="1" seed="1"></feTurbulence>
      <feDisplacementMap in="SourceGraphic" in2="Rauschen" scale="9"></feDisplacementMap>
   </filter>
 </defs>
</svg>

</body> </html>

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