HTML + CSSBackgrounds

Seigaiha wave pattern

The Japanese pattern of overlapping wave scales in indigo and washi paper, with a gold leaf glow that appears under the pointer.

Settings

Color 1#1f3a6e

Color 2#f3ecdc

Color 3#d4a636

Speed1x

Density / scale1x

Opacity1

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

Markdown version with all the code, for AI assistants

More in Backgrounds

See all Backgrounds

Mesh gradient

BackgroundsHTML + CSS

Northern lights background

BackgroundsHTML + CSS

Breathing gradient

BackgroundsHTML + CSS

Liquid sunset background

BackgroundsHTML + CSS

Dot grid wave

BackgroundsHTML + CSS

Synthwave grid

BackgroundsHTML + CSS

Honeycomb background

BackgroundsHTML + CSS

Diagonal light lines

BackgroundsHTML + CSS

Where to use it

Seigaiha, the blue ocean wave, has decorated Japanese textiles and ceramics for centuries. This version builds it from an 80 by 40 SVG tile where each scale is a set of concentric rings, stacked so the lower rows cover the upper ones. The whole surface drifts sideways like a slow tide, and a second, gold version is revealed through a soft round mask.

The first color is the indigo, the second the paper lines and the third the gold leaf. Density makes the scales smaller. Without a pointer the gold glow wanders on its own; hover the pattern and it follows you. Beautiful for tea, ceramics, Japanese food and hospitality.