Caustiques d’eau
Un réseau de lumière ondulante, comme le soleil au fond d’une piscine, créé avec un filtre SVG.
Réglages
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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Arrière-plans
Où l’utiliser
Les caustiques apportent l’été directement à l’écran. Elles vont bien sur le site d’un hôtel en bord de mer, les soldes d’été d’un surf shop ou la page de réservation d’une sortie en bateau. La lumière bouge sans cesse, la page paraît fraîche sans rien de chargé. Un fond d’eau animé en HTML et CSS, dessiné par un filtre SVG.
Les bleus et le turquoise s’imposent, mais un vert profond en fait un lac ou un spa. Un filtre SVG demande plus de calcul qu’un simple dégradé : si la page est déjà remplie d’images, testez-la d’abord sur un smartphone milieu de gamme.