spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/stroke-draw/circuit-trace.html7  Desc   : Circuit-board traces drawing themselves with staggered delays8  ============================================================9-->10<!--svgarden11title: Circuit trace12slug: circuit-trace13category: stroke-draw14tags: [draw, circuit, stagger, polyline]15difficulty: intermediate16techniques: [pathLength, stroke-dashoffset, animation-delay, nth-of-type]17how_it_works: >18  Four polylines share one dashoffset draw animation, but nth-of-type hands each19  a growing animation-delay, so the traces fan out from the chip one after20  another like power flowing through a board. The solder pads are circles whose21  opacity keyframe is timed to land exactly when their trace arrives — matching22  delays across different elements is the whole trick to multi-part choreography.23customizable:24  - { var: "--sg-color",    label: "Trace color", type: color, default: "#7F77DD" }25  - { var: "--sg-size",     label: "Size",        type: range, min: 80, max: 320, default: 160, unit: px }26  - { var: "--sg-duration", label: "Speed",       type: range, min: 1, max: 6, step: 0.1, default: 2.4, unit: s }27created: 2026-08-1028-->29<div class="sg-circuit-trace" style="--sg-color:#7F77DD; --sg-size:160px; --sg-duration:2.4s;">30  <svg viewBox="0 0 120 80" aria-hidden="true" focusable="false">31    <rect class="sg-circuit-trace-chip" x="48" y="30" width="24" height="20" rx="3" />32    <polyline pathLength="100" points="48,36 30,36 30,16 14,16" />33    <polyline pathLength="100" points="48,44 24,44 24,64 10,64" />34    <polyline pathLength="100" points="72,36 92,36 92,14 108,14" />35    <polyline pathLength="100" points="72,44 96,44 96,66 110,66" />36    <circle cx="14"  cy="16" r="3" />37    <circle cx="10"  cy="64" r="3" />38    <circle cx="108" cy="14" r="3" />39    <circle cx="110" cy="66" r="3" />40  </svg>41</div>42<style>43  .sg-circuit-trace {44    width: var(--sg-size);45  }46  .sg-circuit-trace svg {47    display: block;48    width: 100%;49  }50  .sg-circuit-trace-chip {51    fill: none;52    stroke: var(--sg-color);53    stroke-width: 2.5;54  }55  .sg-circuit-trace polyline {56    fill: none;57    stroke: var(--sg-color);58    stroke-width: 2;59    stroke-linecap: round;60    stroke-linejoin: round;61    stroke-dasharray: 100;62    stroke-dashoffset: 100;63    animation: sg-circuit-trace-draw var(--sg-duration) ease-out infinite;64  }65  .sg-circuit-trace polyline:nth-of-type(2) { animation-delay: calc(var(--sg-duration) * 0.12); }66  .sg-circuit-trace polyline:nth-of-type(3) { animation-delay: calc(var(--sg-duration) * 0.24); }67  .sg-circuit-trace polyline:nth-of-type(4) { animation-delay: calc(var(--sg-duration) * 0.36); }68  .sg-circuit-trace circle {69    fill: var(--sg-color);70    opacity: 0;71    animation: sg-circuit-trace-pad var(--sg-duration) linear infinite;72  }73  .sg-circuit-trace circle:nth-of-type(2) { animation-delay: calc(var(--sg-duration) * 0.12); }74  .sg-circuit-trace circle:nth-of-type(3) { animation-delay: calc(var(--sg-duration) * 0.24); }75  .sg-circuit-trace circle:nth-of-type(4) { animation-delay: calc(var(--sg-duration) * 0.36); }76  @keyframes sg-circuit-trace-draw {77    0%       { stroke-dashoffset: 100; }78    45%, 80% { stroke-dashoffset: 0; opacity: 1; }79    100%     { stroke-dashoffset: 0; opacity: 0; }80  }81  @keyframes sg-circuit-trace-pad {82    0%, 40%  { opacity: 0; }83    50%, 80% { opacity: 1; }84    100%     { opacity: 0; }85  }86</style>87