Animated Beam — Free HTML CSS JS Integration Diagram Snippet

<div class="ab-diagram" id="abDiagram">
  <svg class="ab-wires" id="abWires" aria-hidden="true"></svg>
  <div class="ab-col">
    <div class="ab-node" data-node="a">◐</div>
    <div class="ab-node" data-node="b">✉</div>
    <div class="ab-node" data-node="c">▤</div>
  </div>
  <div class="ab-col ab-center">
    <div class="ab-hub" data-node="hub">⬡</div>
  </div>
  <div class="ab-col">
    <div class="ab-node" data-node="d">☁</div>
    <div class="ab-node" data-node="e">⚡</div>
    <div class="ab-node" data-node="f">◔</div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0a14;color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:24px}

.ab-diagram{position:relative;width:100%;max-width:520px;display:flex;justify-content:space-between;align-items:center;gap:60px}
.ab-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ab-col{display:flex;flex-direction:column;gap:26px;z-index:1}
.ab-center{justify-content:center}

.ab-node,.ab-hub{display:flex;align-items:center;justify-content:center;border-radius:14px;background:#16162a;border:1px solid #2a2a44;font-size:22px;box-shadow:0 8px 24px -10px rgba(0,0,0,.6)}
.ab-node{width:50px;height:50px}
.ab-hub{width:74px;height:74px;font-size:34px;background:linear-gradient(160deg,#1e1b4b,#312e81);border-color:#4f46e5;box-shadow:0 0 0 1px rgba(99,102,241,.3),0 0 40px -6px rgba(99,102,241,.6)}

.ab-path{stroke:#2a2a44;stroke-width:2;fill:none}
.ab-flow{stroke-width:2.4;fill:none;stroke-linecap:round}

var diagram = document.getElementById('abDiagram');
var svg = document.getElementById('abWires');
var SVGNS = 'http://www.w3.org/2000/svg';
var PAIRS = [['a','hub'],['b','hub'],['c','hub'],['d','hub'],['e','hub'],['f','hub']];
var COLORS = ['#6366f1','#ec4899','#22d3ee','#34d399','#fbbf24','#fb7185'];

function center(el) {
  var r = el.getBoundingClientRect();
  var d = diagram.getBoundingClientRect();
  return { x: r.left - d.left + r.width / 2, y: r.top - d.top + r.height / 2 };
}

function curve(p1, p2) {
  // A horizontal cubic bezier — control points pulled toward the hub midline.
  var mx = (p1.x + p2.x) / 2;
  return 'M' + p1.x + ' ' + p1.y + ' C ' + mx + ' ' + p1.y + ', ' + mx + ' ' + p2.y + ', ' + p2.x + ' ' + p2.y;
}

function build() {
  svg.innerHTML = '';
  // One gradient def per beam so each flowing dash has its own color glow.
  var defs = document.createElementNS(SVGNS, 'defs');
  svg.appendChild(defs);

  PAIRS.forEach(function (pair, i) {
    var a = diagram.querySelector('[data-node=' + pair[0] + ']');
    var b = diagram.querySelector('[data-node=' + pair[1] + ']');
    var d = curve(center(a), center(b));

    var base = document.createElementNS(SVGNS, 'path');
    base.setAttribute('d', d); base.setAttribute('class', 'ab-path');
    svg.appendChild(base);

    var flow = document.createElementNS(SVGNS, 'path');
    flow.setAttribute('d', d); flow.setAttribute('class', 'ab-flow');
    flow.setAttribute('stroke', COLORS[i]);
    var len = base.getTotalLength();
    // A short bright dash chasing along the wire = the "beam".
    flow.setAttribute('stroke-dasharray', (len * 0.18) + ' ' + len);
    flow.style.filter = 'drop-shadow(0 0 5px ' + COLORS[i] + ')';
    flow.animate(
      [{ strokeDashoffset: len }, { strokeDashoffset: -len * 0.18 }],
      { duration: 2200, delay: i * 320, iterations: Infinity, easing: 'linear' }
    );
    svg.appendChild(flow);
  });
}

build();
window.addEventListener('resize', build);