Circuit trace

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/stroke-draw/circuit-trace.html
  Desc   : Circuit-board traces drawing themselves with staggered delays
  ============================================================
-->
<div class="sg-circuit-trace" style="--sg-color:#7F77DD; --sg-size:160px; --sg-duration:2.4s;">
  <svg viewBox="0 0 120 80" aria-hidden="true" focusable="false">
    <rect class="sg-circuit-trace-chip" x="48" y="30" width="24" height="20" rx="3" />
    <polyline pathLength="100" points="48,36 30,36 30,16 14,16" />
    <polyline pathLength="100" points="48,44 24,44 24,64 10,64" />
    <polyline pathLength="100" points="72,36 92,36 92,14 108,14" />
    <polyline pathLength="100" points="72,44 96,44 96,66 110,66" />
    <circle cx="14"  cy="16" r="3" />
    <circle cx="10"  cy="64" r="3" />
    <circle cx="108" cy="14" r="3" />
    <circle cx="110" cy="66" r="3" />
  </svg>
</div>
<style>
  .sg-circuit-trace {
    width: var(--sg-size);
  }
  .sg-circuit-trace svg {
    display: block;
    width: 100%;
  }
  .sg-circuit-trace-chip {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 2.5;
  }
  .sg-circuit-trace polyline {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: sg-circuit-trace-draw var(--sg-duration) ease-out infinite;
  }
  .sg-circuit-trace polyline:nth-of-type(2) { animation-delay: calc(var(--sg-duration) * 0.12); }
  .sg-circuit-trace polyline:nth-of-type(3) { animation-delay: calc(var(--sg-duration) * 0.24); }
  .sg-circuit-trace polyline:nth-of-type(4) { animation-delay: calc(var(--sg-duration) * 0.36); }
  .sg-circuit-trace circle {
    fill: var(--sg-color);
    opacity: 0;
    animation: sg-circuit-trace-pad var(--sg-duration) linear infinite;
  }
  .sg-circuit-trace circle:nth-of-type(2) { animation-delay: calc(var(--sg-duration) * 0.12); }
  .sg-circuit-trace circle:nth-of-type(3) { animation-delay: calc(var(--sg-duration) * 0.24); }
  .sg-circuit-trace circle:nth-of-type(4) { animation-delay: calc(var(--sg-duration) * 0.36); }
  @keyframes sg-circuit-trace-draw {
    0%       { stroke-dashoffset: 100; }
    45%, 80% { stroke-dashoffset: 0; opacity: 1; }
    100%     { stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes sg-circuit-trace-pad {
    0%, 40%  { opacity: 0; }
    50%, 80% { opacity: 1; }
    100%     { opacity: 0; }
  }
</style>