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

@import url("https://fonts.googleapis.com/css?family=Amatic+SC:400,700");

body { 

 font-family: 'Amatic SC', sans-serif;
 font-size: 100px;

} body { 

 line-height: 100vh;
 background: #c82f04;
 color: #fff;

} .squiggly { 

 animation: squiggly-anim 0.5s linear infinite;
 filter: url("#squiggly-0");
 display: inline-block;
 vertical-align: middle;
 width: 100%;
 outline: none;
 text-align: center;
 line-height: 1;

} .small { 

 font-size: 0.5em;

}

p { 

 margin: 0;

} @keyframes squiggly-anim { 

 0% {
   filter: url("#squiggly-0");
 }
 25% {
   filter: url("#squiggly-1");
 }
 50% {
   filter: url("#squiggly-2");
 }
 75% {
   filter: url("#squiggly-3");
 }
 100% {
   filter: url("#squiggly-4");
 }

} 


 </style>
 <title>Wackelpeter (SVG-Filter in HTML)</title>

</head>

<body> 

 Wackelpeter

– mit – <p/> SVG-Filter <p class="small">(Verändern Sie den Text!)

<svg xmlns="http://www.w3.org/2000/svg"> 

 <defs>
   <filter id="squiggly-0">
     <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
     <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
   </filter>
   <filter id="squiggly-1">
     <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>

<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" /> 

   </filter>
   
   <filter id="squiggly-2">
     <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>

<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> 

   </filter>
   <filter id="squiggly-3">
     <feTurbulence baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>

<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" /> 

   </filter>
   
   <filter id="squiggly-4">
     <feTurbulence  baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>

<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> 

   </filter>
 </defs>

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

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