Beispiel:FeTurbulence-5.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Schreinerei Meier</title>
<style> button {
display: inline-block; padding: 1.5rem 2rem; position: relative;
background: transparent; color: beige; outline:none; border:none; font-size: 1.5rem;
&:after {
border: medium solid black;
content: "";
inset: 0;
position: absolute;
filter: url(#noise);
background: maroon; color: beige; z-index: -1;
}
}
button:hover, button:focus {
&:after {background: rgb(106 140 161);} }
html, body {
margin: 0; padding: 0; height: 100%; font-family: sans-serif;
font-size: clamp(1em, 6vw, 2em); color: maroon;
overflow: hidden;
position:relative; }
body::before {
content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: beige; filter: url(#pinewood);
z-index: -1;
pointer-events: none;
}
h1,p { text-align: center; max-width: 20em; margin: 10vh auto; } </style>
<script> 'use strict';
</script>
</head>
<body>
Klopf auf Holz!
Herbstaktion der Schreinerei Meier.
<button>Newsletter</button> <button>Kunden-Chat</button>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <defs> <filter id="pinewood" x="0" y="0" width="100%" height="100%">
<feTurbulence type="fractalNoise" baseFrequency=".1 .01"/>
<feColorMatrix values="0 0 0 .11 .69
0 0 0 .09 .38
0 0 0 .08 .14
0 0 0 0 1"/>
</filter>
<filter id="noise">
<feTurbulence type="fractalNoise" baseFrequency=".05" numOctaves="4" />
<feDisplacementMap in="SourceGraphic" scale="12" />
</filter>
</defs>
</svg>
</body> </html>
