Render SVG circuit with pulsing effects

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CircuitFX — v3.0 API</title>
<style>
  body{margin:0;display:flex;min-height:100vh;font:14px/1.5 system-ui,sans-serif;color:#cfe8f5;background:#0b1622}
  aside{width:250px;padding:16px;background:linear-gradient(180deg,#0e2233,#0a1a29);box-shadow:inset 0 0 0 1px #123a52}
  main{flex:1;padding:24px 40px}
  h2{color:#7ee7ff;margin-top:0}
  a{color:#9adcf0;text-decoration:none;display:block;padding:6px 0}
  .card{background:#0e2233;border-radius:12px;padding:14px 16px;margin-bottom:14px}
  button{background:#123a52;color:#9adcf0;border:0;border-radius:8px;padding:6px 10px;margin:0 6px 6px 0;cursor:pointer}
  button:hover{background:#1b6d8f}
  #hud{position:fixed;right:8px;bottom:8px;z-index:99;font:11px monospace;color:#8ef0ff;
       background:rgba(2,20,32,.85);border:1px solid #1b6d8f;padding:6px 9px;white-space:pre}
</style>
</head>
<body>
<aside>
  <h2>Left sidebar</h2>
  <a href="#">Dashboard</a><a href="#">Reports</a><a href="#">Nodes</a><a href="#">Settings</a>
</aside>
<main>
  <div class="card"><b>CircuitFX v3.0 — API demo.</b> Everything below calls the public API at runtime.</div>
  <div class="card toolbar">
    <button id="b-calm">setOptions: calmer</button>
    <button id="b-live">setOptions: livelier</button>
    <button id="b-pause">pause()</button>
    <button id="b-theme">setOptions: mint theme</button>
    <button id="b-wide">live attr: card width→100</button>
    <button id="b-add">watch: + add panel</button>
  </div>
  <div class="card" id="apicard" data-circuit-fx data-circuit-fx-width="60">
    This card's strip reacts live to <code>data-circuit-fx-*</code> attribute changes.
  </div>
</main>
<aside>
  <h2>Right sidebar</h2>
  <a href="#">Activity</a><a href="#">Alerts</a>
</aside>
<div id="hud">CFX boot…</div>

<script>
/* =====================================================================
   CircuitFX v3.0 — data-driven...