PCB traces as a design language

The hero on the homepage is a small love letter to PCB routing: gray copper traces leaving a row of pads mid-board, bending 45° towards the top-right and terminating in vias; the way a well-routed board actually looks.

The rules of the game

Real boards follow routing conventions, and the artwork does too:

• Traces only bend at 45°, never 90°
• Parallel traces keep a constant clearance
• Every trace ends in a via: the ring-and-dot through-hole

Drawing it

Each trace is a single SVG path: a horizontal run, a 45° climb, another horizontal run into the via:

M 604 252  H 672  L 824 100  H 996

The geometry is generated in Rust: a Trace struct and an iterator, so the whole bundle stays parallel by construction instead of by pixel-pushing.

Making it flow

The "electricity" is a second copy of each path with a stroke-dasharray gap much longer than the trace, animated with stroke-dashoffset:

.pcb-pulse {
  stroke-dasharray: 40 720;
  animation: trace-flow 1.4s linear infinite;
}
@keyframes trace-flow {
  to { stroke-dashoffset: 0; }
}

Staggered durations and negative delays make the pulses feel like real asynchronous traffic. No JavaScript involved and it respects prefers-reduced-motion.