Connection graph

Use it for

• Explaining integrations, knowledge graphs or how a product connects teams
• A calm section background with something to explore
• Showing that data flows between many sources

Avoid

• Real network data with more than about twenty nodes, which turns into a hairball
• Behind body text, where the pulses pull the eye

How it works

Nodes and links are plain SVG in a fixed viewBox, turned on its side (x and y swapped) when the view is portrait so it fills a phone. A requestAnimationFrame loop drifts each node on its own slow sine path, then writes the node transforms and the line end points through refs, so React never renders per frame. Three pulses walk the graph: each eases along one link, then picks a random next link from the node it reached. Hovering a node marks it and its neighbours and dims the rest with one class on the root.

Accessibility

The graph is one image with a text description. A visible pause button stops all motion (WCAG 2.2.2), and the loop also stops off screen. Reduced motion shows the graph still, with no pulses and no pause button.