HTML + CSSFondos
Circuito impreso
Pistas que salen de un chip central mientras pequeños pulsos de luz corren por ellas.
Ajustes
1x
1x
1
Código
<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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Fondos
Dónde usarlo
Un circuito impreso dice hardware y electrónica antes de que nadie lea una palabra. Encaja en la home de una startup de IoT, en un club de robótica o en la landing de un hackathon. El chip queda en el centro, un sitio perfecto para tu logo. Un fondo de circuito animado con SVG y CSS.
Sube la escala si quieres el chip más grande y que las pistas llenen más la pantalla. Los pulsos lucen más en un solo color intenso sobre un fondo muy oscuro; con demasiados colores empieza a parecer un juguete.