HTML + CSSBackgrounds
Memphis confetti
Eighties squiggles, zigzags, triangles and dot grids float around and bounce out of the way when the pointer gets close.
Settings
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 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.
More in Backgrounds
See all BackgroundsWhere to use it
A nod to the Memphis Group and the bold graphics of the eighties. Thirty small SVG shapes, from squiggles and zigzags to striped squares, half circles and dot grids, are spread over a fine dot pattern with a little randomness. Each one floats and rocks on its own rhythm, and outlined pieces use the text color so they work in light and dark themes.
Pick three loud colors for the shapes. Density scales them up or down. A short script pushes nearby shapes away from the pointer with an elastic overshoot, so the confetti reacts as you move. Fun for events, music, kids' products and creative agencies.