HTML + CSSFondos

Confeti Memphis

Garabatos, zigzags, triángulos y rejillas de puntos ochenteros flotan y se apartan con un rebote cuando se acerca el cursor.

Ajustes

1x
1x
1

Código

<div class="pt-uvq16-memphis"><svg class="b" viewBox="0 0 48 20" aria-hidden="true" style="--x:11.9%;--y:11.0%;--w:3.45;--r:273deg;--t:5.0;--dl:-5.0;--dx:3px;--dy:2px"><path d="M3 10q5.25-9 10.5 0t10.5 0t10.5 0t10.5 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg><svg class="f" viewBox="0 0 28 28" aria-hidden="true" style="--x:21.4%;--y:9.8%;--w:2.18;--r:121deg;--t:6.7;--dl:-1.5;--dx:1px;--dy:-1px"><path d="M14 3v22M3 14h22" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round"/></svg><svg class="a" viewBox="0 0 48 20" aria-hidden="true" style="--x:44.3%;--y:6.3%;--w:3.24;--r:305deg;--t:4.9;--dl:-2.5;--dx:-6px;--dy:-7px"><path d="M3 10q5.25-9 10.5 0t10.5 0t10.5 0t10.5 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg><svg class="f" viewBox="0 0 30 30" aria-hidden="true" style="--x:62.5%;--y:4.3%;--w:1.66;--r:84deg;--t:5.3;--dl:-2.7;--dx:-4px;--dy:4px"><circle cx="15" cy="15" r="13" fill="currentColor"/></svg><svg class="a" viewBox="0 0 30 30" aria-hidden="true" style="--x:75.9%;--y:8.8%;--w:2.00;--r:357deg;--t:5.3;--dl:-3.6;--dx:-4px;--dy:0px"><circle cx="15" cy="15" r="13" fill="currentColor"/></svg><svg class="c" viewBox="0 0 30 30" aria-hidden="true" style="--x:87.0%;--y:11.1%;--w:2.26;--r:306deg;--t:8.0;--dl:-1.5;--dx:-6px;--dy:8px"><circle cx="15" cy="15" r="11" fill="none" stroke="currentColor" stroke-width="5"/></svg><svg class="a" viewBox="0 0 48 20" aria-hidden="true" style="--x:11.1%;--y:24.1%;--w:3.62;--r:204deg;--t:5.2;--dl:-4.5;--dx:0px;--dy:-6px"><path d="M3 16L11 4L19 16L27 4L35 16L43 4" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"/></svg><svg class="f" viewBox="0 0 44 16" aria-hidden="true" style="--x:29.0%;--y:27.3%;--w:3.07;--r:24deg;--t:4.4;--dl:-1.3;--dx:1px;--dy:4px"><rect x="2" y="2" width="40" height="12" rx="6" fill="currentColor"/></svg><svg class="c" viewBox="0 0 44 16" aria-hidden="true" style="--x:41.0%;--y:34.0%;--w:3.75;--r:45deg;--t:6.3;--dl:-0.2;--dx:7px;--dy:-4px"><rect x="2" y="2" width="40" height="12" rx="6" fill="currentColor"/></svg><svg class="c" viewBox="0 0 44 16" aria-hidden="true" style="--x:56.9%;--y:33.5%;--w:3.75;--r:320deg;--t:5.7;--dl:-0.2;--dx:0px;--dy:6px"><rect x="2" y="2" width="40" height="12" rx="6" fill="currentColor"/></svg><svg class="f" viewBox="0 0 30 30" aria-hidden="true" style="--x:79.7%;--y:27.2%;--w:1.90;--r:161deg;--t:6.8;--dl:-2.9;--dx:4px;--dy:0px"><circle cx="15" cy="15" r="13" fill="currentColor"/></svg><svg class="c" viewBox="0 0 44 24" aria-hidden="true" style="--x:93.0%;--y:30.6%;--w:3.07;--r:29deg;--t:6.5;--dl:-2.8;--dx:5px;--dy:-2px"><path d="M4 22A18 18 0 0 1 40 22Z" fill="currentColor"/><path class="k" d="M4 22H40"/></svg><svg class="f" viewBox="0 0 44 40" aria-hidden="true" style="--x:12.8%;--y:52.6%;--w:2.46;--r:55deg;--t:8.9;--dl:-1.6;--dx:-2px;--dy:-7px"><path class="k" d="M24 7L41 37H7Z"/><path d="M20 3L37 33H3Z" fill="currentColor"/></svg><svg class="c" viewBox="0 0 48 20" aria-hidden="true" style="--x:28.1%;--y:53.0%;--w:3.30;--r:30deg;--t:8.9;--dl:-1.6;--dx:-5px;--dy:-7px"><path d="M3 16L11 4L19 16L27 4L35 16L43 4" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"/></svg><svg class="b" viewBox="0 0 48 20" aria-hidden="true" style="--x:43.9%;--y:49.9%;--w:4.15;--r:276deg;--t:8.7;--dl:-0.4;--dx:-1px;--dy:4px"><path d="M3 10q5.25-9 10.5 0t10.5 0t10.5 0t10.5 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg><svg class="f" viewBox="0 0 44 40" aria-hidden="true" style="--x:60.0%;--y:52.6%;--w:2.66;--r:210deg;--t:4.1;--dl:-0.8;--dx:-1px;--dy:6px"><path class="k" d="M24 7L41 37H7Z"/><path d="M20 3L37 33H3Z" fill="currentColor"/></svg><svg class="c" viewBox="0 0 44 16" aria-hidden="true" style="--x:72.3%;--y:51.7%;--w:2.80;--r:77deg;--t:8.5;--dl:-2.1;--dx:8px;--dy:5px"><rect x="2" y="2" width="40" height="12" rx="6" fill="currentColor"/></svg><svg class="a" viewBox="0 0 30 30" aria-hidden="true" style="--x:92.6%;--y:47.8%;--w:2.55;--r:265deg;--t:5.5;--dl:-3.9;--dx:-1px;--dy:7px"><path d="M2 28L28 2M2 16L16 2M14 28L28 14" fill="none" stroke="currentColor" stroke-width="3"/><path class="k" d="M2 2H28V28H2Z"/></svg><svg class="a" viewBox="0 0 30 30" aria-hidden="true" style="--x:8.5%;--y:71.8%;--w:2.43;--r:147deg;--t:5.4;--dl:-3.4;--dx:0px;--dy:-2px"><circle cx="15" cy="15" r="11" fill="none" stroke="currentColor" stroke-width="5"/></svg><svg class="c" viewBox="0 0 44 24" aria-hidden="true" style="--x:23.8%;--y:71.1%;--w:2.55;--r:255deg;--t:7.3;--dl:-2.7;--dx:-3px;--dy:4px"><path d="M4 22A18 18 0 0 1 40 22Z" fill="currentColor"/><path class="k" d="M4 22H40"/></svg><svg class="a" viewBox="0 0 30 30" aria-hidden="true" style="--x:42.0%;--y:72.4%;--w:2.19;--r:49deg;--t:7.2;--dl:-0.6;--dx:6px;--dy:-5px"><path d="M2 28L28 2M2 16L16 2M14 28L28 14" fill="none" stroke="currentColor" stroke-width="3"/><path class="k" d="M2 2H28V28H2Z"/></svg><svg class="a" viewBox="0 0 30 30" aria-hidden="true" style="--x:60.5%;--y:71.6%;--w:1.71;--r:247deg;--t:5.1;--dl:-3.9;--dx:-3px;--dy:5px"><circle cx="15" cy="15" r="11" fill="none" stroke="currentColor" stroke-width="5"/></svg><svg class="a" viewBox="0 0 44 40" aria-hidden="true" style="--x:78.4%;--y:65.8%;--w:2.51;--r:215deg;--t:7.4;--dl:-0.8;--dx:-3px;--dy:6px"><path class="k" d="M24 7L41 37H7Z"/><path d="M20 3L37 33H3Z" fill="currentColor"/></svg><svg class="a" viewBox="0 0 30 30" aria-hidden="true" style="--x:92.3%;--y:72.9%;--w:1.63;--r:334deg;--t:8.8;--dl:-3.4;--dx:-1px;--dy:1px"><circle cx="15" cy="15" r="13" fill="currentColor"/></svg><svg class="a" viewBox="0 0 44 40" aria-hidden="true" style="--x:5.1%;--y:95.7%;--w:2.60;--r:7deg;--t:5.3;--dl:-1.7;--dx:8px;--dy:8px"><path class="k" d="M24 7L41 37H7Z"/><path d="M20 3L37 33H3Z" fill="currentColor"/></svg><svg class="c" viewBox="0 0 48 20" aria-hidden="true" style="--x:20.1%;--y:94.2%;--w:3.29;--r:184deg;--t:4.1;--dl:-1.2;--dx:2px;--dy:7px"><path d="M3 16L11 4L19 16L27 4L35 16L43 4" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round" stroke-linecap="round"/></svg><svg class="b" viewBox="0 0 30 30" aria-hidden="true" style="--x:39.7%;--y:95.1%;--w:1.89;--r:65deg;--t:7.2;--dl:-0.2;--dx:1px;--dy:-4px"><circle cx="15" cy="15" r="13" fill="currentColor"/></svg><svg class="a" viewBox="0 0 44 40" aria-hidden="true" style="--x:56.3%;--y:87.8%;--w:2.40;--r:242deg;--t:8.9;--dl:-5.0;--dx:6px;--dy:7px"><path class="k" d="M24 7L41 37H7Z"/><path d="M20 3L37 33H3Z" fill="currentColor"/></svg><svg class="c" viewBox="0 0 44 40" aria-hidden="true" style="--x:70.0%;--y:93.5%;--w:2.70;--r:316deg;--t:5.6;--dl:-4.3;--dx:2px;--dy:-2px"><path class="k" d="M24 7L41 37H7Z"/><path d="M20 3L37 33H3Z" fill="currentColor"/></svg><svg class="a" viewBox="0 0 44 16" aria-hidden="true" style="--x:87.7%;--y:89.4%;--w:3.46;--r:124deg;--t:7.3;--dl:-2.3;--dx:5px;--dy:-1px"><rect x="2" y="2" width="40" height="12" rx="6" fill="currentColor"/></svg></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

Dónde usarlo

Un guiño al Grupo Memphis y a los gráficos atrevidos de los ochenta. Treinta pequeñas figuras SVG, desde garabatos y zigzags hasta cuadrados rayados, medias lunas y rejillas de puntos, se reparten con algo de azar sobre una trama fina de puntos. Cada una flota y se balancea a su ritmo, y las piezas con contorno usan el color del texto para funcionar en tema claro y oscuro.

Elige tres colores llamativos para las figuras. La densidad las hace más grandes o más pequeñas. Un script corto aparta las figuras cercanas al cursor con un rebote elástico, así que el confeti reacciona al moverte. Divertido para eventos, música, productos infantiles y agencias creativas.