Leiterplatte
Leiterbahnen führen von einem Chip in der Mitte weg, und kleine Lichtimpulse flitzen darüber.
Einstellungen
Code
<div class="pt-circuit"><svg viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice"><g class="b"><path d="M431 240 L431 220 L345 134 L345 -52"/><path d="M454 240 L454 187 L407 140 L407 -79"/><path d="M477 240 L477 207 L427 156 L427 -38"/><path d="M500 240 L500 172 L553 119 L553 -219"/><path d="M523 240 L523 181 L486 144 L486 -128"/><path d="M546 240 L546 214 L447 115 L447 -147"/><path d="M569 240 L569 188 L606 151 L606 27"/><path d="M431 360 L431 407 L496 472 L496 603"/><path d="M454 360 L454 430 L362 522 L362 679"/><path d="M477 360 L477 408 L436 450 L436 756"/><path d="M500 360 L500 408 L538 446 L538 678"/><path d="M523 360 L523 397 L611 485 L611 644"/><path d="M546 360 L546 402 L485 463 L485 798"/><path d="M569 360 L569 399 L472 496 L472 683"/><path d="M420 249 L352 249 L260 157 L-32 157"/><path d="M420 266 L396 266 L313 183 L21 183"/><path d="M420 283 L360 283 L284 206 L172 206"/><path d="M420 300 L378 300 L333 345 L99 345"/><path d="M420 317 L354 317 L284 246 L183 246"/><path d="M420 334 L357 334 L270 247 L174 247"/><path d="M420 351 L400 351 L349 301 L265 301"/><path d="M580 249 L643 249 L736 342 L930 342"/><path d="M580 266 L644 266 L688 222 L868 222"/><path d="M580 283 L607 283 L666 342 L898 342"/><path d="M580 300 L617 300 L650 267 L971 267"/><path d="M580 317 L647 317 L710 254 L992 254"/><path d="M580 334 L627 334 L695 266 L906 266"/><path d="M580 351 L627 351 L714 265 L863 265"/></g><g class="p"><path d="M431 240 L431 220 L345 134 L345 -52" pathLength="100" style="--t:4.2s;--dl:-3.4s"/><path d="M454 240 L454 187 L407 140 L407 -79" pathLength="100" style="--t:4.9s;--dl:-2.1s"/><path d="M477 240 L477 207 L427 156 L427 -38" pathLength="100" style="--t:3.3s;--dl:-3.8s"/><path d="M500 240 L500 172 L553 119 L553 -219" pathLength="100" style="--t:2.9s;--dl:-0.6s"/><path d="M523 240 L523 181 L486 144 L486 -128" pathLength="100" style="--t:2.6s;--dl:-2.1s"/><path d="M546 240 L546 214 L447 115 L447 -147" pathLength="100" style="--t:4.6s;--dl:-2.5s"/><path d="M569 240 L569 188 L606 151 L606 27" pathLength="100" style="--t:3.4s;--dl:-1.4s"/><path d="M431 360 L431 407 L496 472 L496 603" pathLength="100" style="--t:3.6s;--dl:-2.9s"/><path d="M454 360 L454 430 L362 522 L362 679" pathLength="100" style="--t:3.6s;--dl:-1.1s"/><path d="M477 360 L477 408 L436 450 L436 756" pathLength="100" style="--t:2.0s;--dl:-5.0s"/><path d="M500 360 L500 408 L538 446 L538 678" pathLength="100" style="--t:4.0s;--dl:-4.5s"/><path d="M523 360 L523 397 L611 485 L611 644" pathLength="100" style="--t:3.7s;--dl:-0.2s"/><path d="M546 360 L546 402 L485 463 L485 798" pathLength="100" style="--t:2.5s;--dl:-4.8s"/><path d="M569 360 L569 399 L472 496 L472 683" pathLength="100" style="--t:3.7s;--dl:-0.8s"/><path d="M420 249 L352 249 L260 157 L-32 157" pathLength="100" style="--t:4.8s;--dl:-4.8s"/><path d="M420 266 L396 266 L313 183 L21 183" pathLength="100" style="--t:3.6s;--dl:-3.8s"/><path d="M420 283 L360 283 L284 206 L172 206" pathLength="100" style="--t:2.6s;--dl:-1.6s"/><path d="M420 300 L378 300 L333 345 L99 345" pathLength="100" style="--t:3.3s;--dl:-1.4s"/><path d="M420 317 L354 317 L284 246 L183 246" pathLength="100" style="--t:4.7s;--dl:-0.9s"/><path d="M420 334 L357 334 L270 247 L174 247" pathLength="100" style="--t:4.3s;--dl:-4.6s"/><path d="M420 351 L400 351 L349 301 L265 301" pathLength="100" style="--t:4.0s;--dl:-1.4s"/><path d="M580 249 L643 249 L736 342 L930 342" pathLength="100" style="--t:4.4s;--dl:-2.8s"/><path d="M580 266 L644 266 L688 222 L868 222" pathLength="100" style="--t:3.4s;--dl:-3.0s"/><path d="M580 283 L607 283 L666 342 L898 342" pathLength="100" style="--t:2.2s;--dl:-3.3s"/><path d="M580 300 L617 300 L650 267 L971 267" pathLength="100" style="--t:4.9s;--dl:-1.8s"/><path d="M580 317 L647 317 L710 254 L992 254" pathLength="100" style="--t:3.8s;--dl:-1.5s"/><path d="M580 334 L627 334 L695 266 L906 266" pathLength="100" style="--t:3.6s;--dl:-0.8s"/><path d="M580 351 L627 351 L714 265 L863 265" pathLength="100" style="--t:2.7s;--dl:-0.3s"/></g><g class="n"><circle cx="345" cy="-52" r="5"/><circle cx="407" cy="-79" r="5"/><circle cx="427" cy="-38" r="5"/><circle cx="553" cy="-219" r="5"/><circle cx="486" cy="-128" r="5"/><circle cx="447" cy="-147" r="5"/><circle cx="606" cy="27" r="5"/><circle cx="496" cy="603" r="5"/><circle cx="362" cy="679" r="5"/><circle cx="436" cy="756" r="5"/><circle cx="538" cy="678" r="5"/><circle cx="611" cy="644" r="5"/><circle cx="485" cy="798" r="5"/><circle cx="472" cy="683" r="5"/><circle cx="-32" cy="157" r="5"/><circle cx="21" cy="183" r="5"/><circle cx="172" cy="206" r="5"/><circle cx="99" cy="345" r="5"/><circle cx="183" cy="246" r="5"/><circle cx="174" cy="247" r="5"/><circle cx="265" cy="301" r="5"/><circle cx="930" cy="342" r="5"/><circle cx="868" cy="222" r="5"/><circle cx="898" cy="342" r="5"/><circle cx="971" cy="267" r="5"/><circle cx="992" cy="254" r="5"/><circle cx="906" cy="266" r="5"/><circle cx="863" cy="265" r="5"/></g><rect class="chip" x="420" y="240" width="160" height="120" rx="12"/><rect class="core" x="460" y="270" width="80" height="60" rx="6"/></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
Wofür du ihn nutzen kannst
Eine Platine sagt Hardware und Elektronik, bevor jemand ein Wort gelesen hat. Sie passt zur Startseite eines IoT-Startups, zu einer Robotik-AG, einer Handy-Reparaturwerkstatt oder zur Landingpage eines Hackathons. Der Chip sitzt in der Mitte, ein natürlicher Platz für dein Logo. Ein animierter Leiterplatten-Hintergrund aus SVG und CSS.
Zieh die Skalierung hoch, wenn der Chip größer sein und die Bahnen mehr vom Bildschirm füllen sollen. Die Impulse wirken am besten in einer einzigen kräftigen Farbe auf sehr dunklem Grund, mit zu vielen Farben sieht es schnell nach Spielzeug aus.