Beispiel:FeTurbulence-4.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wolkenweich</title>
<style> html, body {
margin: 0; padding: 0; height: 100%; font-family: sans-serif;
font-size: clamp(1em, 6vw, 2em); color: navy;
overflow: hidden;
}
body::before {
content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: skyblue; filter: url(#clouds); z-index: -1; pointer-events: none;
}
h1,p { text-align: center; max-width: 20em; margin: 5vh auto; } </style>
<script> 'use strict';
</script>
</head>
<body>
Wolkenweich!
In unseren Schuhen fühlst du dich,
als ob du auf Wolke 7 schweben würdest.
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<filter id="clouds"> <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="4"/> <feColorMatrix type="luminanceToAlpha"/> <feComponentTransfer> <feFuncR type="linear" slope="0.8" intercept="0.2"/> <feFuncG type="linear" slope="0.8" intercept="0.2"/> <feFuncB type="linear" slope="1" intercept="0.5"/> </feComponentTransfer> </filter>
</defs>
</svg>
</body> </html>
