# Circuit board

> Traces branch out from a central chip while little pulses of light race along them.

- Category: [Backgrounds](https://library.aimran.es/components/patterns)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/pt-circuit
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## 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.

## Code

### HTML

```html
<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>
```

### CSS

```css
.pt-circuit {
  --c1: #0071e3;
  --c2: #8b5cf6;
  --c3: #14b8a6;
  --k: 1;
  /* velocidad */
  --d: 1;
  /* densidad / escala */
  --o: 1;
  /* opacidad */
  --bg: #05060a;
  --fg: #ffffff;
  --blend: screen;
  min-height: 100vh;
}

.pt-circuit {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-circuit>* {
  opacity: var(--o);
}

.pt-circuit {
  background: radial-gradient(circle,color-mix(in srgb,var(--c1) 12%,var(--bg)),var(--bg) 70%),var(--bg)!important;
}

.pt-circuit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(color-mix(in srgb,var(--c1) 25%,transparent) 1px,transparent 1.5px) 0 0/24px 24px;
}

.pt-circuit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(var(--d));
}

.pt-circuit .b path {
  fill: none;
  stroke: color-mix(in srgb,var(--c1) 35%,transparent);
  stroke-width: 2;
}

.pt-circuit .p path {
  fill: none;
  stroke: var(--c2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 94;
  filter: drop-shadow(0 0 6px var(--c2));
  animation: pt-circuit-p calc(var(--t) / var(--k)) linear infinite;
  animation-delay: var(--dl);
}

.pt-circuit .n circle {
  fill: var(--bg);
  stroke: var(--c1);
  stroke-width: 2;
}

.pt-circuit .chip {
  fill: color-mix(in srgb,var(--c1) 12%,var(--bg));
  stroke: var(--c1);
  stroke-width: 2;
  animation: pt-circuit-c calc(3s / var(--k)) ease-in-out infinite;
}

.pt-circuit .core {
  fill: color-mix(in srgb,var(--c3) 30%,var(--bg));
  stroke: var(--c3);
  stroke-width: 1.5;
}

@keyframes pt-circuit-p {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pt-circuit-c {
  0%,100% {
    filter: drop-shadow(0 0 4px var(--c1));
  }
  50% {
    filter: drop-shadow(0 0 18px var(--c2));
  }
}
```

### React

```tsx
// @ts-nocheck
import { useEffect, useRef } from "react";

const css = `
.pt-circuit {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-circuit>* {
  opacity: var(--o);
}

.pt-circuit {
  background: radial-gradient(circle,color-mix(in srgb,var(--c1) 12%,var(--bg)),var(--bg) 70%),var(--bg)!important;
}

.pt-circuit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(color-mix(in srgb,var(--c1) 25%,transparent) 1px,transparent 1.5px) 0 0/24px 24px;
}

.pt-circuit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(var(--d));
}

.pt-circuit .b path {
  fill: none;
  stroke: color-mix(in srgb,var(--c1) 35%,transparent);
  stroke-width: 2;
}

.pt-circuit .p path {
  fill: none;
  stroke: var(--c2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 94;
  filter: drop-shadow(0 0 6px var(--c2));
  animation: pt-circuit-p calc(var(--t) / var(--k)) linear infinite;
  animation-delay: var(--dl);
}

.pt-circuit .n circle {
  fill: var(--bg);
  stroke: var(--c1);
  stroke-width: 2;
}

.pt-circuit .chip {
  fill: color-mix(in srgb,var(--c1) 12%,var(--bg));
  stroke: var(--c1);
  stroke-width: 2;
  animation: pt-circuit-c calc(3s / var(--k)) ease-in-out infinite;
}

.pt-circuit .core {
  fill: color-mix(in srgb,var(--c3) 30%,var(--bg));
  stroke: var(--c3);
  stroke-width: 1.5;
}

@keyframes pt-circuit-p {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pt-circuit-c {
  0%,100% {
    filter: drop-shadow(0 0 4px var(--c1));
  }
  50% {
    filter: drop-shadow(0 0 18px var(--c2));
  }
}

`;

export default function PatternCircuit() {
  const ref = useRef(null);
  return (
    <>
      <style>{css}</style>
      <div
        ref={ref}
        className="pt-circuit"
        style={{
          "--c1": "#0071e3",
          "--c2": "#8b5cf6",
          "--c3": "#14b8a6",
          "--k": 1,
          "--d": 1,
          "--o": 1,
          "--bg": "#05060a",
          "--fg": "#ffffff",
          "--blend": "screen",
          minHeight: "100vh",
        }}
      >
        <svg viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice"><g className="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 className="p"><path d="M431 240 L431 220 L345 134 L345 -52" pathLength="100" style={{ "--t": "4.2s", "--dl": "-3.4s" } as CSSProperties} /><path d="M454 240 L454 187 L407 140 L407 -79" pathLength="100" style={{ "--t": "4.9s", "--dl": "-2.1s" } as CSSProperties} /><path d="M477 240 L477 207 L427 156 L427 -38" pathLength="100" style={{ "--t": "3.3s", "--dl": "-3.8s" } as CSSProperties} /><path d="M500 240 L500 172 L553 119 L553 -219" pathLength="100" style={{ "--t": "2.9s", "--dl": "-0.6s" } as CSSProperties} /><path d="M523 240 L523 181 L486 144 L486 -128" pathLength="100" style={{ "--t": "2.6s", "--dl": "-2.1s" } as CSSProperties} /><path d="M546 240 L546 214 L447 115 L447 -147" pathLength="100" style={{ "--t": "4.6s", "--dl": "-2.5s" } as CSSProperties} /><path d="M569 240 L569 188 L606 151 L606 27" pathLength="100" style={{ "--t": "3.4s", "--dl": "-1.4s" } as CSSProperties} /><path d="M431 360 L431 407 L496 472 L496 603" pathLength="100" style={{ "--t": "3.6s", "--dl": "-2.9s" } as CSSProperties} /><path d="M454 360 L454 430 L362 522 L362 679" pathLength="100" style={{ "--t": "3.6s", "--dl": "-1.1s" } as CSSProperties} /><path d="M477 360 L477 408 L436 450 L436 756" pathLength="100" style={{ "--t": "2.0s", "--dl": "-5.0s" } as CSSProperties} /><path d="M500 360 L500 408 L538 446 L538 678" pathLength="100" style={{ "--t": "4.0s", "--dl": "-4.5s" } as CSSProperties} /><path d="M523 360 L523 397 L611 485 L611 644" pathLength="100" style={{ "--t": "3.7s", "--dl": "-0.2s" } as CSSProperties} /><path d="M546 360 L546 402 L485 463 L485 798" pathLength="100" style={{ "--t": "2.5s", "--dl": "-4.8s" } as CSSProperties} /><path d="M569 360 L569 399 L472 496 L472 683" pathLength="100" style={{ "--t": "3.7s", "--dl": "-0.8s" } as CSSProperties} /><path d="M420 249 L352 249 L260 157 L-32 157" pathLength="100" style={{ "--t": "4.8s", "--dl": "-4.8s" } as CSSProperties} /><path d="M420 266 L396 266 L313 183 L21 183" pathLength="100" style={{ "--t": "3.6s", "--dl": "-3.8s" } as CSSProperties} /><path d="M420 283 L360 283 L284 206 L172 206" pathLength="100" style={{ "--t": "2.6s", "--dl": "-1.6s" } as CSSProperties} /><path d="M420 300 L378 300 L333 345 L99 345" pathLength="100" style={{ "--t": "3.3s", "--dl": "-1.4s" } as CSSProperties} /><path d="M420 317 L354 317 L284 246 L183 246" pathLength="100" style={{ "--t": "4.7s", "--dl": "-0.9s" } as CSSProperties} /><path d="M420 334 L357 334 L270 247 L174 247" pathLength="100" style={{ "--t": "4.3s", "--dl": "-4.6s" } as CSSProperties} /><path d="M420 351 L400 351 L349 301 L265 301" pathLength="100" style={{ "--t": "4.0s", "--dl": "-1.4s" } as CSSProperties} /><path d="M580 249 L643 249 L736 342 L930 342" pathLength="100" style={{ "--t": "4.4s", "--dl": "-2.8s" } as CSSProperties} /><path d="M580 266 L644 266 L688 222 L868 222" pathLength="100" style={{ "--t": "3.4s", "--dl": "-3.0s" } as CSSProperties} /><path d="M580 283 L607 283 L666 342 L898 342" pathLength="100" style={{ "--t": "2.2s", "--dl": "-3.3s" } as CSSProperties} /><path d="M580 300 L617 300 L650 267 L971 267" pathLength="100" style={{ "--t": "4.9s", "--dl": "-1.8s" } as CSSProperties} /><path d="M580 317 L647 317 L710 254 L992 254" pathLength="100" style={{ "--t": "3.8s", "--dl": "-1.5s" } as CSSProperties} /><path d="M580 334 L627 334 L695 266 L906 266" pathLength="100" style={{ "--t": "3.6s", "--dl": "-0.8s" } as CSSProperties} /><path d="M580 351 L627 351 L714 265 L863 265" pathLength="100" style={{ "--t": "2.7s", "--dl": "-0.3s" } as CSSProperties} /></g><g className="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 className="chip" x="420" y="240" width="160" height="120" rx="12" /><rect className="core" x="460" y="270" width="80" height="60" rx="6" /></svg>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Circuit board” block (Backgrounds) from AIMRAN Library to my project.

## What it is
Traces branch out from a central chip while little pulses of light race along them.

## Chosen settings
- Color 1: #0071e3
- Color 2: #8b5cf6
- Color 3: #14b8a6
- Speed: 1x (from 0.2 to 3x)
- Density / scale: 1x (from 0.5 to 2x)
- Opacity: 1 (from 0.2 to 1)

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
// @ts-nocheck
import { useEffect, useRef } from "react";

const css = `
.pt-circuit {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg);
  container-type: size;
  isolation: isolate;
}

.pt-circuit>* {
  opacity: var(--o);
}

.pt-circuit {
  background: radial-gradient(circle,color-mix(in srgb,var(--c1) 12%,var(--bg)),var(--bg) 70%),var(--bg)!important;
}

.pt-circuit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(color-mix(in srgb,var(--c1) 25%,transparent) 1px,transparent 1.5px) 0 0/24px 24px;
}

.pt-circuit svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(var(--d));
}

.pt-circuit .b path {
  fill: none;
  stroke: color-mix(in srgb,var(--c1) 35%,transparent);
  stroke-width: 2;
}

.pt-circuit .p path {
  fill: none;
  stroke: var(--c2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 94;
  filter: drop-shadow(0 0 6px var(--c2));
  animation: pt-circuit-p calc(var(--t) / var(--k)) linear infinite;
  animation-delay: var(--dl);
}

.pt-circuit .n circle {
  fill: var(--bg);
  stroke: var(--c1);
  stroke-width: 2;
}

.pt-circuit .chip {
  fill: color-mix(in srgb,var(--c1) 12%,var(--bg));
  stroke: var(--c1);
  stroke-width: 2;
  animation: pt-circuit-c calc(3s / var(--k)) ease-in-out infinite;
}

.pt-circuit .core {
  fill: color-mix(in srgb,var(--c3) 30%,var(--bg));
  stroke: var(--c3);
  stroke-width: 1.5;
}

@keyframes pt-circuit-p {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pt-circuit-c {
  0%,100% {
    filter: drop-shadow(0 0 4px var(--c1));
  }
  50% {
    filter: drop-shadow(0 0 18px var(--c2));
  }
}

`;

export default function PatternCircuit() {
  const ref = useRef(null);
  return (
    <>
      <style>{css}</style>
      <div
        ref={ref}
        className="pt-circuit"
        style={{
          "--c1": "#0071e3",
          "--c2": "#8b5cf6",
          "--c3": "#14b8a6",
          "--k": 1,
          "--d": 1,
          "--o": 1,
          "--bg": "#05060a",
          "--fg": "#ffffff",
          "--blend": "screen",
          minHeight: "100vh",
        }}
      >
        <svg viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice"><g className="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 className="p"><path d="M431 240 L431 220 L345 134 L345 -52" pathLength="100" style={{ "--t": "4.2s", "--dl": "-3.4s" } as CSSProperties} /><path d="M454 240 L454 187 L407 140 L407 -79" pathLength="100" style={{ "--t": "4.9s", "--dl": "-2.1s" } as CSSProperties} /><path d="M477 240 L477 207 L427 156 L427 -38" pathLength="100" style={{ "--t": "3.3s", "--dl": "-3.8s" } as CSSProperties} /><path d="M500 240 L500 172 L553 119 L553 -219" pathLength="100" style={{ "--t": "2.9s", "--dl": "-0.6s" } as CSSProperties} /><path d="M523 240 L523 181 L486 144 L486 -128" pathLength="100" style={{ "--t": "2.6s", "--dl": "-2.1s" } as CSSProperties} /><path d="M546 240 L546 214 L447 115 L447 -147" pathLength="100" style={{ "--t": "4.6s", "--dl": "-2.5s" } as CSSProperties} /><path d="M569 240 L569 188 L606 151 L606 27" pathLength="100" style={{ "--t": "3.4s", "--dl": "-1.4s" } as CSSProperties} /><path d="M431 360 L431 407 L496 472 L496 603" pathLength="100" style={{ "--t": "3.6s", "--dl": "-2.9s" } as CSSProperties} /><path d="M454 360 L454 430 L362 522 L362 679" pathLength="100" style={{ "--t": "3.6s", "--dl": "-1.1s" } as CSSProperties} /><path d="M477 360 L477 408 L436 450 L436 756" pathLength="100" style={{ "--t": "2.0s", "--dl": "-5.0s" } as CSSProperties} /><path d="M500 360 L500 408 L538 446 L538 678" pathLength="100" style={{ "--t": "4.0s", "--dl": "-4.5s" } as CSSProperties} /><path d="M523 360 L523 397 L611 485 L611 644" pathLength="100" style={{ "--t": "3.7s", "--dl": "-0.2s" } as CSSProperties} /><path d="M546 360 L546 402 L485 463 L485 798" pathLength="100" style={{ "--t": "2.5s", "--dl": "-4.8s" } as CSSProperties} /><path d="M569 360 L569 399 L472 496 L472 683" pathLength="100" style={{ "--t": "3.7s", "--dl": "-0.8s" } as CSSProperties} /><path d="M420 249 L352 249 L260 157 L-32 157" pathLength="100" style={{ "--t": "4.8s", "--dl": "-4.8s" } as CSSProperties} /><path d="M420 266 L396 266 L313 183 L21 183" pathLength="100" style={{ "--t": "3.6s", "--dl": "-3.8s" } as CSSProperties} /><path d="M420 283 L360 283 L284 206 L172 206" pathLength="100" style={{ "--t": "2.6s", "--dl": "-1.6s" } as CSSProperties} /><path d="M420 300 L378 300 L333 345 L99 345" pathLength="100" style={{ "--t": "3.3s", "--dl": "-1.4s" } as CSSProperties} /><path d="M420 317 L354 317 L284 246 L183 246" pathLength="100" style={{ "--t": "4.7s", "--dl": "-0.9s" } as CSSProperties} /><path d="M420 334 L357 334 L270 247 L174 247" pathLength="100" style={{ "--t": "4.3s", "--dl": "-4.6s" } as CSSProperties} /><path d="M420 351 L400 351 L349 301 L265 301" pathLength="100" style={{ "--t": "4.0s", "--dl": "-1.4s" } as CSSProperties} /><path d="M580 249 L643 249 L736 342 L930 342" pathLength="100" style={{ "--t": "4.4s", "--dl": "-2.8s" } as CSSProperties} /><path d="M580 266 L644 266 L688 222 L868 222" pathLength="100" style={{ "--t": "3.4s", "--dl": "-3.0s" } as CSSProperties} /><path d="M580 283 L607 283 L666 342 L898 342" pathLength="100" style={{ "--t": "2.2s", "--dl": "-3.3s" } as CSSProperties} /><path d="M580 300 L617 300 L650 267 L971 267" pathLength="100" style={{ "--t": "4.9s", "--dl": "-1.8s" } as CSSProperties} /><path d="M580 317 L647 317 L710 254 L992 254" pathLength="100" style={{ "--t": "3.8s", "--dl": "-1.5s" } as CSSProperties} /><path d="M580 334 L627 334 L695 266 L906 266" pathLength="100" style={{ "--t": "3.6s", "--dl": "-0.8s" } as CSSProperties} /><path d="M580 351 L627 351 L714 265 L863 265" pathLength="100" style={{ "--t": "2.7s", "--dl": "-0.3s" } as CSSProperties} /></g><g className="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 className="chip" x="420" y="240" width="160" height="120" rx="12" /><rect className="core" x="460" y="270" width="80" height="60" rx="6" /></svg>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````