Circuit imprimé
Des pistes partent d’une puce centrale pendant que de petites impulsions lumineuses les parcourent.
Réglages
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 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
Où l’utiliser
Un circuit imprimé évoque le matériel et l’électronique avant même qu’on lise un mot. Il convient à la page d’accueil d’une startup IoT, à un club de robotique ou à la landing page d’un hackathon. La puce occupe le centre, un endroit tout trouvé pour votre logo. Un fond de circuit animé en SVG et CSS.
Augmentez l’échelle si vous voulez une puce plus grande et des pistes qui remplissent davantage l’écran. Les impulsions ressortent mieux dans une seule couleur vive sur fond très sombre ; avec trop de couleurs, on bascule vers le jouet.