HTML + CSSArrière-plans
Confettis Memphis
Gribouillis, zigzags, triangles et grilles de points des années quatre-vingt flottent et s'écartent avec un rebond quand le curseur approche.
Réglages
1x
1x
1
Code
<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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Arrière-plans
Voir tout : Arrière-plansOù l’utiliser
Un clin d'œil au groupe Memphis et aux graphismes audacieux des années quatre-vingt. Trente petites formes SVG, des gribouillis et zigzags aux carrés rayés, demi-cercles et grilles de points, sont réparties avec un peu de hasard sur une fine trame de points. Chacune flotte et se balance à son rythme, et les pièces à contour prennent la couleur du texte pour fonctionner en thème clair comme sombre.
Choisis trois couleurs vives pour les formes. La densité les agrandit ou les réduit. Un court script repousse les formes proches du curseur avec un dépassement élastique, si bien que les confettis réagissent à tes mouvements. Amusant pour les événements, la musique, les produits pour enfants et les agences créatives.