Wasser-Kaustik
Ein wogendes Lichtnetz wie Sonnenlicht auf dem Grund eines Pools, erzeugt mit einem SVG-Filter.
Einstellungen
Code
<div class="pt-water"><svg><filter id="pt-water-f" x="0" y="0" width="100%" height="100%"><feTurbulence id="pt-water-t" type="turbulence" baseFrequency="0.006 0.009" numOctaves="1" seed="4"/><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -40 3"/></filter><animate href="#pt-water-t" attributeName="baseFrequency" dur="18s" values="0.006 0.009;0.008 0.007;0.006 0.009" repeatCount="indefinite"/><rect width="100%" height="100%" filter="url(#pt-water-f)"/></svg><b></b></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Hintergründe
Alle ansehen: HintergründeWofür du ihn nutzen kannst
Kaustiken holen den Sommer direkt auf den Bildschirm. Sie passen auf die Website eines Strandhotels, zum Sommer-Sale eines Surfshops oder auf die Buchungsseite für eine Bootstour. Das Licht bewegt sich ständig, dadurch wirkt die Seite frisch, ohne unruhig zu sein. Ein animierter Wasser-Hintergrund in HTML und CSS, gezeichnet von einem SVG-Filter.
Blau und Türkis liegen nahe, mit einem tiefen Grün wird daraus aber ein See oder ein Spa. SVG-Filter brauchen mehr Rechenleistung als einfache Verläufe. Ist die Seite schon voller Bilder, teste sie zuerst auf einem Mittelklasse-Handy.