HTML + CSSHintergründe

Seigaiha-Wellenmuster

Das japanische Muster aus überlappenden Wellenschuppen in Indigo und Washi-Papier, mit einem Blattgold-Schimmer unter dem Cursor.

Einstellungen

Farbe 1#1f3a6e

Farbe 2#f3ecdc

Farbe 3#d4a636

Tempo1x

Dichte / Skalierung1x

Deckkraft1

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 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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Hintergründe

Alle ansehen: Hintergründe

Mesh-Gradient

HintergründeHTML + CSS

Polarlicht-Hintergrund

HintergründeHTML + CSS

Atmender Farbverlauf

HintergründeHTML + CSS

Flüssiger Sonnenuntergang

HintergründeHTML + CSS

Punktraster mit Welle

HintergründeHTML + CSS

Synthwave-Raster

HintergründeHTML + CSS

Waben-Hintergrund

HintergründeHTML + CSS

Diagonale Lichtlinien

HintergründeHTML + CSS

Wofür du ihn nutzen kannst

Seigaiha, die Welle des blauen Ozeans, schmückt seit Jahrhunderten japanische Stoffe und Keramik. Diese Version baut sie aus einer SVG-Kachel von 80 mal 40, in der jede Schuppe aus konzentrischen Ringen besteht und die unteren Reihen die oberen überdecken. Die ganze Fläche driftet seitwärts wie eine langsame Flut, und eine zweite, goldene Version erscheint durch eine weiche runde Maske.

Die erste Farbe ist das Indigo, die zweite die Papierlinien, die dritte das Blattgold. Die Dichte macht die Schuppen kleiner. Ohne Cursor wandert der Goldschimmer von selbst, beim Darüberfahren folgt er dir. Schön für Tee, Keramik, japanische Küche und Gastronomie.