Beispiel:FeTurbulence-6.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wasser mit Wellen</title> <style>
svg { width: 100%; } image { filter: url(#filter_refract); }
</style>
<script>
</script> </head> <body> <svg viewBox="30 30 954 639">
<title>demo animated feTurbulence feDisplacementMap</title> <desc>Demonstration of SMIL refraction effect animation with the bitmap from https://upload.wikimedia.org/wikipedia/commons/8/8b/Gulf_of_Eilat_%28Red_Sea%29_coral_reefs.jpg</desc> <filter id="filter_refract"> <feTurbulence baseFrequency="0.005"/> <feColorMatrix type="hueRotate"> <animate attributeName="values" values="0;360" dur="3s" repeatCount="indefinite"/> </feColorMatrix> <feDisplacementMap in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="G"/> </filter> <image width="984" height="659" href="https://upload.wikimedia.org/wikipedia/commons/8/8b/Gulf_of_Eilat_%28Red_Sea%29_coral_reefs.jpg"> <desc>Coral reef with Pseudanthias squamipinnis, Gulf of Eilat Red Sea by Daviddarom</desc> </image>
</svg> </body> </html>
