Animated Beam — Free HTML CSS JS Integration Diagram Snippet

The animated beam is the integration-diagram pattern made famous by developer platforms: a grid of service icons connected to a central hub by curved wires, with pulses of light flowing along each wire toward the center — visualizing data, events, or integrations converging on your product. This snippet builds it with plain HTML, CSS, and vanilla JavaScript using SVG, and it auto-routes the wires by measuring the actual node positions, so it stays correct at any size.

Measuring real node positions

Rather than hard-coding coordinates, the script reads each node's position from the live layout. center(el) uses getBoundingClientRect for both the node and the diagram container and returns the node's center relative to the container. This means you lay out the icons with normal flexbox, and the wires connect to wherever they actually land — change the spacing, add nodes, or resize the window and the beams follow.

Curved connectors with cubic beziers

Each wire is an SVG path built by curve(p1, p2), which draws a cubic bezier between two node centers. The control points share the midpoint x but keep each endpoint's y, producing a smooth horizontal S-curve that eases out of one node and into the other — far more elegant than a straight line, and the standard look for these diagrams. A muted gray base path is drawn first so the wire is visible even between pulses.

The beam itself: a chasing dash

The flowing light is a clever use of stroke-dasharray and stroke-dashoffset. The animated path's dash array is set to one short bright segment (18% of the wire's length, measured with getTotalLength) followed by a gap as long as the whole wire. Animating stroke-dashoffset from the full length down to negative the dash length slides that single bright segment from one end of the wire to the other — a packet of light traveling the path. A colored drop-shadow filter gives it a glow.

Staggered, infinite, per-color beams

Each of the six wires gets its own color and its own beam, animated with the Web Animations API (element.animate) at iterations: Infinity. A per-wire delay of i * 320ms staggers them so the pulses don't all fire in lockstep — they ripple into the hub in sequence, which looks alive rather than robotic. Using animate() keeps each beam's timing self-contained without managing CSS classes or keyframe names.

The glowing hub

The center node is larger and styled with a layered box-shadow — an inner ring plus a soft outer glow — so it reads as the powered destination all the beams flow into. The side nodes are neutral tiles, keeping the visual hierarchy clear: many sources, one hub.

Responsive re-routing

Because the wires are derived from measured positions, a resize listener simply calls build() again, which clears the SVG and recomputes every path and beam for the new layout. There's no separate mobile version to maintain — the diagram re-routes itself.

Customizing it

Swap the node glyphs for real logo SVGs, edit the PAIRS array to change which nodes connect (you can chain nodes, not just hub-and-spoke), recolor the beams, and tune the dash length, duration, and stagger. Reverse the strokeDashoffset animation to flow outward from the hub instead. Pair it with a feature tabs showcase or an integration cards grid to explain how your product connects.