Circuit Board Background
Circuit traces, vias and chips on a dark board, with pulses of light racing along the traces. The board is one SVG tile used as a mask; the pulses are dashed strokes moved with stroke-dashoffset.
Also known as: technology background animation css, circuit lines animation, pcb background css.
HTML
<div class="bgx-circuit-board" aria-hidden="true">
<svg class="bgx-circuit-board-pulses" viewBox="0 0 1600 800">
<defs>
<path id="bgx-circuit-board-run" d="M0 20H48L68 40H118L138 20H200H248L268 40H318L338 20H400H448L468 40H518L538 20H600H648L668 40H718L738 20H800H848L868 40H918L938 20H1000H1048L1068 40H1118L1138 20H1200H1248L1268 40H1318L1338 20H1400H1448L1468 40H1518L1538 20H1600" pathLength="1000" />
<path id="bgx-circuit-board-hop" d="M0 80H26L46 60H82" pathLength="100" />
<path id="bgx-circuit-board-drop" d="M200 80H170L150 60H126" pathLength="100" />
</defs>
<use href="#bgx-circuit-board-run" style="--t: 6s; --d: -1s" />
<use href="#bgx-circuit-board-run" style="--t: 6s; --d: -4s" />
<use href="#bgx-circuit-board-run" y="100" style="--t: 7s; --d: -2.5s; --dir: reverse" />
<use href="#bgx-circuit-board-run" y="100" style="--t: 7s; --d: -6s; --dir: reverse" />
<use href="#bgx-circuit-board-run" y="200" style="--t: 5.5s; --d: -3s" />
<use href="#bgx-circuit-board-run" y="300" style="--t: 6.5s; --d: -0.5s; --dir: reverse" />
<use href="#bgx-circuit-board-run" y="400" style="--t: 6s; --d: -2s" />
<use href="#bgx-circuit-board-run" y="500" style="--t: 7.5s; --d: -5s; --dir: reverse" />
<use href="#bgx-circuit-board-hop" class="bgx-circuit-board-short" style="--t: 2.4s; --d: -0.3s" />
<use href="#bgx-circuit-board-hop" x="200" y="100" class="bgx-circuit-board-short" style="--t: 2.8s; --d: -1.5s" />
<use href="#bgx-circuit-board-hop" x="600" y="200" class="bgx-circuit-board-short" style="--t: 2.6s; --d: -2s" />
<use href="#bgx-circuit-board-drop" y="100" class="bgx-circuit-board-short" style="--t: 2.6s; --d: -0.9s" />
<use href="#bgx-circuit-board-drop" x="200" class="bgx-circuit-board-short" style="--t: 3s; --d: -2.2s" />
<use href="#bgx-circuit-board-drop" x="400" y="200" class="bgx-circuit-board-short" style="--t: 2.7s; --d: -1.2s" />
</svg>
</div>CSS
.bgx-circuit-board {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M0 20H48L68 40H118L138 20H200M0 80H26L46 60H82M200 80H170L150 60H126M60 100V92L74 78H100M60 0V6M158 30V20M174 30V20M162 48V54'/%3E%3Ccircle cx='87' cy='60' r='5'/%3E%3Ccircle cx='121' cy='60' r='5'/%3E%3Ccircle cx='105' cy='78' r='5'/%3E%3Ccircle cx='60' cy='11' r='5'/%3E%3Ccircle cx='162' cy='59' r='5'/%3E%3Crect x='150' y='30' width='32' height='18' rx='2'/%3E%3C/g%3E%3C/svg%3E");
background: color-mix(in srgb, var(--c) 9%, #04070a);
}
.bgx-circuit-board::before {
content: "";
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--c) 32%, transparent);
-webkit-mask: var(--board) 0 0 / 16em 8em;
mask: var(--board) 0 0 / 16em 8em;
}
.bgx-circuit-board-pulses {
position: absolute;
top: 0;
left: 0;
width: 128em;
height: 64em;
overflow: visible;
}
.bgx-circuit-board-pulses use {
fill: none;
stroke: color-mix(in srgb, var(--c) 40%, #fff);
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 14 1100;
animation: bgx-circuit-board-run var(--t) linear var(--d) infinite var(--dir, normal);
}
.bgx-circuit-board-pulses .bgx-circuit-board-short {
stroke-dasharray: 24 1100;
animation-name: bgx-circuit-board-hop;
}
@keyframes bgx-circuit-board-run {
from { stroke-dashoffset: 14; }
to { stroke-dashoffset: -1000; }
}
@keyframes bgx-circuit-board-hop {
from { stroke-dashoffset: 24; }
to { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-circuit-board, .bgx-circuit-board *, .bgx-circuit-board::before, .bgx-circuit-board::after, .bgx-circuit-board *::before, .bgx-circuit-board *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.