Water caustics
A rippling net of light, like sunshine on the bottom of a swimming pool, made with an SVG filter.
Settings
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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
Where to use it
Caustics bring summer straight onto the screen. They look right on the homepage of a beach hotel, a surf shop’s summer sale or the booking page of a boat trip. The light keeps shifting, so the page feels fresh without anything busy on it. An animated water background in HTML and CSS, drawn by an SVG filter.
Blues and turquoise are the obvious pick, but a deep green turns it into a lake or a spa. SVG filters are heavier than plain gradients, so if the page is already full of images, test it on a mid-range phone first.