HTML + CSSFondos

Olas seigaiha

El patrón japonés de escamas de olas en índigo y papel washi, con un brillo de pan de oro que aparece bajo el cursor.

Ajustes

Color 1#1f3a6e

Color 2#f3ecdc

Color 3#d4a636

Velocidad1x

Densidad / escala1x

Opacidad1

Código

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 para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Fondos

Ver todos: Fondos

Degradado mesh

FondosHTML + CSS

Fondo de aurora boreal

FondosHTML + CSS

Degradado que respira

FondosHTML + CSS

Atardecer líquido

FondosHTML + CSS

Rejilla de puntos en onda

FondosHTML + CSS

Rejilla synthwave

FondosHTML + CSS

Fondo de panal hexagonal

FondosHTML + CSS

Líneas diagonales con luz

FondosHTML + CSS

Dónde usarlo

El seigaiha decora tejidos y cerámica japonesa desde hace siglos. Esta versión lo construye con una tesela SVG de 80 por 40 donde cada escama es un grupo de anillos concéntricos, apilados para que las filas de abajo tapen a las de arriba. Toda la superficie se desliza de lado como una marea lenta y una segunda versión dorada asoma por una máscara redonda y suave.

El primer color es el índigo, el segundo las líneas de papel y el tercero el pan de oro. La densidad hace las escamas más pequeñas. Sin cursor, el brillo dorado pasea solo; al pasar por encima, te sigue. Precioso para té, cerámica, cocina japonesa y hostelería.