HTML + CSSArrière-plans

Vagues seigaiha

Le motif japonais d'écailles de vagues superposées en indigo et papier washi, avec un éclat de feuille d'or qui apparaît sous le curseur.

Réglages

Couleur 1#1f3a6e

Couleur 2#f3ecdc

Couleur 3#d4a636

Vitesse1x

Densité / échelle1x

Opacité1

Code

index.html

<div class="pt-uvq16-seigaiha"><svg class="tl" aria-hidden="true"><defs><pattern id="uvq16-sg-a" width="80" height="40" patternUnits="userSpaceOnUse"><circle class="f" cx="40" cy="-20" r="39"/><circle class="w" cx="40" cy="-20" r="33"/><circle class="w" cx="40" cy="-20" r="26"/><circle class="w" cx="40" cy="-20" r="19"/><circle class="w" cx="40" cy="-20" r="12"/><circle class="w0" cx="40" cy="-20" r="4"/><circle class="f" cx="0" cy="0" r="39"/><circle class="w" cx="0" cy="0" r="33"/><circle class="w" cx="0" cy="0" r="26"/><circle class="w" cx="0" cy="0" r="19"/><circle class="w" cx="0" cy="0" r="12"/><circle class="w0" cx="0" cy="0" r="4"/><circle class="f" cx="80" cy="0" r="39"/><circle class="w" cx="80" cy="0" r="33"/><circle class="w" cx="80" cy="0" r="26"/><circle class="w" cx="80" cy="0" r="19"/><circle class="w" cx="80" cy="0" r="12"/><circle class="w0" cx="80" cy="0" r="4"/><circle class="f" cx="40" cy="20" r="39"/><circle class="w" cx="40" cy="20" r="33"/><circle class="w" cx="40" cy="20" r="26"/><circle class="w" cx="40" cy="20" r="19"/><circle class="w" cx="40" cy="20" r="12"/><circle class="w0" cx="40" cy="20" r="4"/><circle class="f" cx="0" cy="40" r="39"/><circle class="w" cx="0" cy="40" r="33"/><circle class="w" cx="0" cy="40" r="26"/><circle class="w" cx="0" cy="40" r="19"/><circle class="w" cx="0" cy="40" r="12"/><circle class="w0" cx="0" cy="40" r="4"/><circle class="f" cx="80" cy="40" r="39"/><circle class="w" cx="80" cy="40" r="33"/><circle class="w" cx="80" cy="40" r="26"/><circle class="w" cx="80" cy="40" r="19"/><circle class="w" cx="80" cy="40" r="12"/><circle class="w0" cx="80" cy="40" r="4"/><circle class="f" cx="40" cy="60" r="39"/><circle class="w" cx="40" cy="60" r="33"/><circle class="w" cx="40" cy="60" r="26"/><circle class="w" cx="40" cy="60" r="19"/><circle class="w" cx="40" cy="60" r="12"/><circle class="w0" cx="40" cy="60" r="4"/></pattern></defs><rect width="100%" height="100%" fill="url(#uvq16-sg-a)"/></svg><div class="gd"><svg class="tl" aria-hidden="true"><defs><pattern id="uvq16-sg-b" width="80" height="40" patternUnits="userSpaceOnUse"><circle class="f" cx="40" cy="-20" r="39"/><circle class="w" cx="40" cy="-20" r="33"/><circle class="w" cx="40" cy="-20" r="26"/><circle class="w" cx="40" cy="-20" r="19"/><circle class="w" cx="40" cy="-20" r="12"/><circle class="w0" cx="40" cy="-20" r="4"/><circle class="f" cx="0" cy="0" r="39"/><circle class="w" cx="0" cy="0" r="33"/><circle class="w" cx="0" cy="0" r="26"/><circle class="w" cx="0" cy="0" r="19"/><circle class="w" cx="0" cy="0" r="12"/><circle class="w0" cx="0" cy="0" r="4"/><circle class="f" cx="80" cy="0" r="39"/><circle class="w" cx="80" cy="0" r="33"/><circle class="w" cx="80" cy="0" r="26"/><circle class="w" cx="80" cy="0" r="19"/><circle class="w" cx="80" cy="0" r="12"/><circle class="w0" cx="80" cy="0" r="4"/><circle class="f" cx="40" cy="20" r="39"/><circle class="w" cx="40" cy="20" r="33"/><circle class="w" cx="40" cy="20" r="26"/><circle class="w" cx="40" cy="20" r="19"/><circle class="w" cx="40" cy="20" r="12"/><circle class="w0" cx="40" cy="20" r="4"/><circle class="f" cx="0" cy="40" r="39"/><circle class="w" cx="0" cy="40" r="33"/><circle class="w" cx="0" cy="40" r="26"/><circle class="w" cx="0" cy="40" r="19"/><circle class="w" cx="0" cy="40" r="12"/><circle class="w0" cx="0" cy="40" r="4"/><circle class="f" cx="80" cy="40" r="39"/><circle class="w" cx="80" cy="40" r="33"/><circle class="w" cx="80" cy="40" r="26"/><circle class="w" cx="80" cy="40" r="19"/><circle class="w" cx="80" cy="40" r="12"/><circle class="w0" cx="80" cy="40" r="4"/><circle class="f" cx="40" cy="60" r="39"/><circle class="w" cx="40" cy="60" r="33"/><circle class="w" cx="40" cy="60" r="26"/><circle class="w" cx="40" cy="60" r="19"/><circle class="w" cx="40" cy="60" r="12"/><circle class="w0" cx="40" cy="60" r="4"/></pattern></defs><rect width="100%" height="100%" fill="url(#uvq16-sg-b)"/></svg></div></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Arrière-plans

Voir tout : Arrière-plans

Dégradé mesh

Arrière-plansHTML + CSS

Fond aurore boréale

Arrière-plansHTML + CSS

Dégradé qui respire

Arrière-plansHTML + CSS

Coucher de soleil liquide

Arrière-plansHTML + CSS

Grille de points en onde

Arrière-plansHTML + CSS

Grille synthwave

Arrière-plansHTML + CSS

Fond en nid d’abeille

Arrière-plansHTML + CSS

Lignes diagonales lumineuses

Arrière-plansHTML + CSS

Où l’utiliser

Le seigaiha, la vague de l'océan bleu, orne textiles et céramiques japonaises depuis des siècles. Cette version le construit avec un motif SVG de 80 sur 40 où chaque écaille est un groupe d'anneaux concentriques, empilés pour que les rangées du bas recouvrent celles du haut. Toute la surface glisse de côté comme une marée lente, et une seconde version dorée apparaît à travers un masque rond et doux.

La première couleur est l'indigo, la deuxième les lignes de papier et la troisième la feuille d'or. La densité rend les écailles plus petites. Sans curseur, l'éclat doré se promène seul ; au survol, il te suit. Superbe pour le thé, la céramique, la cuisine japonaise et l'hôtellerie.