HTML + CSSBackgrounds
Circuit board
Traces branch out from a central chip while little pulses of light race along them.
Settings
1x
1x
1
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 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
Where to use it
Circuit traces say hardware and electronics before anyone reads a word. They fit the homepage of an IoT startup, a robotics club or the landing page of a hackathon. The chip sits in the middle, which makes it a natural spot for a logo. An animated circuit board background built with SVG and CSS.
Raise the scale if you want the chip larger and the traces to fill more of the screen. Pulses look best in one bright color against a very dark background; with too many colors it starts to look like a toy.