HTML + CSSHintergründe
Memphis-Konfetti
Kringel, Zickzacks, Dreiecke und Punktraster im Stil der Achtziger schweben umher und springen federnd zur Seite, wenn der Cursor näher kommt.
Einstellungen
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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Hintergründe
Alle ansehen: HintergründeWofür du ihn nutzen kannst
Eine Verbeugung vor der Memphis-Gruppe und den mutigen Grafiken der Achtziger. Dreißig kleine SVG-Formen, von Kringeln und Zickzacks über gestreifte Quadrate und Halbkreise bis zu Punktrastern, verteilen sich mit etwas Zufall über ein feines Punktmuster. Jede schwebt und schaukelt im eigenen Takt, und umrandete Teile nutzen die Textfarbe, damit sie in hellen und dunklen Themes wirken.
Wähle drei kräftige Farben für die Formen. Die Dichte skaliert sie hoch oder runter. Ein kurzes Skript schiebt nahe Formen mit elastischem Nachfedern vom Cursor weg, sodass das Konfetti auf deine Bewegung reagiert. Witzig für Events, Musik, Kinderprodukte und Kreativagenturen.