Integration Network Heroes — How Velocity X Animates 7 Tool Logos Around a Hub in Pure SVG

Most SaaS marketing sites show integration logos in a static grid: Slack, Salesforce, HubSpot, Notion, etc. — stacked in rows, no motion, no connection to what they actually do. Velocity X does something different: a central HQ node (Aidxn's logo) connected to 7 integration icons via SVG paths, with each connection drawn in sequence, circles pulsing as they appear, and soft glow underlines flowing along the circuits. The entire reveal phased over 700ms — globe spin → icons stagger in → lines glow. It reads as a living integration ecosystem, not a feature checklist.

Why Integration Networks Beat Static Grids for B2B

A static grid of logos says "we connect to these platforms." A network diagram with animated draw-ins says "your data flows through our system to every tool that matters." The visual metaphor is stronger — it's not just compatibility, it's orchestration. For B2B products, this matters: enterprise buyers want to know data moves, transforms, and syncs in real time. An animated network shows that without a single line of copy.

SVG animation is the most efficient way to achieve this. No DOM overhead, no layout thrashing, no JavaScript particle systems. Just SVG paths with animated stroke-dasharray and styled circles. Render once, animate forever on the compositor. Total payload for Velocity X's hero: 18KB SVG + 12KB CSS keyframes. Compare that to 50KB of GSAP, Three.js, or a Lottie animation file.

The Architecture: Central Hub, 7 Radial Paths, Phased Reveal

The diagram is an SVG with a central circle (Aidxn HQ) at `cx="400" cy="300"`, seven smaller circles positioned around it at radial angles (0°, 51.4°, 102.8°, 154.2°, 205.7°, 257.1°, 308.6°), and SVG paths connecting hub to each icon. Each path has `stroke-dasharray` set to its total length, then CSS keyframes animate `stroke-dashoffset` from full length to zero — the classic line-draw effect.

{``}

The paths use quadratic Bézier curves (`Q`) instead of straight lines so they arc gracefully around the center. Stroke-linecap is set to `round` so the animated line tip is smooth, not sharp. Each connection has a small pulsing circle (2–3px radius) that flows along the path after the line draws in.

The Animation: Four Phases in 700ms

Phase -1 (0ms): Hub is hidden, scale 0. Phase 0 (0–150ms): Hub rotates 360° and scales to 1 (entrance). Phase 1 (150–400ms): Icons 1–7 stagger in over 250ms with 20ms delays (icons fade + scale from 0 to 1). Phase 2 (400–700ms): Connection paths draw in sequence, offset by 50ms each, then glow-circles pulse forever after. All phases use `animation-fill-mode: forwards` so nothing resets.

{`@keyframes spinHub {
  0% { transform: rotate(0deg) scale(0); opacity: 0; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

@keyframes fadeInIcon {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes drawPath {
  0% { stroke-dashoffset: var(--path-length); }
  100% { stroke-dashoffset: 0; }
}

@keyframes pulseFill {
  0%, 100% { r: 3px; opacity: 0.6; }
  50% { r: 6px; opacity: 0.2; }
}

.hub {
  animation: spinHub 150ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.integration-1 { animation: fadeInIcon 150ms ease-out forwards; animation-delay: 150ms; }
.integration-2 { animation: fadeInIcon 150ms ease-out forwards; animation-delay: 170ms; }
/* ... i-7 delays: 190ms, 210ms, 230ms, 250ms, 270ms */

.connection-1 {
  animation: drawPath 150ms ease-in-out forwards;
  animation-delay: 400ms;
  --path-length: 250;
}

.connection-2 { animation-delay: 450ms; --path-length: 245; }
/* ... c-7 delays: 500ms–650ms, staggered 50ms apart */

.flow-1 {
  animation: pulseFill 1s ease-in-out 550ms infinite;
}
/* ... f-7 delays: 600ms–750ms, matching connection draw finish */`}

Total reveal time: 700ms. After that, glow circles pulse infinitely on the now-visible paths. If the user scrolls away and back, you'll likely miss the animation — but that's intentional; the reveal is a one-time eyeball-catch for viewers landing on the page.

Mobile Considerations: Icons Right-Half Only

On mobile viewports, the entire network diagram would overlap the left-column copy. Solution: reposition icons 1–4 to the right hemisphere only (0°, 85°, 170°, 255°) and keep the paths proportionally shorter so the diagram fits within 100vw. Use a `@media (max-width: 768px)` rule to reposition circles and adjust path `d` attributes to shorter Bézier curves. The hub stays centered; icons cluster right. Copy remains readable.

The Catch: Intersection Observer Gating

If the SVG is below the fold, don't start the animation until it's visible — wasted render cycles otherwise. Wrap the SVG in an IntersectionObserver callback that adds a `play` class once the element enters the viewport. CSS toggles animations on/off via `animation-play-state` or by conditionally removing the keyframes entirely for off-screen elements.

{`const svg = document.querySelector('.integration-hero');
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      svg.classList.add('play');
      observer.unobserve(svg); // Animate only once
    }
  });
});
observer.observe(svg);`}

With this, the SVG waits silently off-screen, then triggers its 700ms reveal the moment it scrolls into view. Bandwidth and performance win.

Respecting Reduced Motion & Graceful Fallback

Users with `prefers-reduced-motion: reduce` should see the network fully drawn and static: no spin, no stagger, no pulse. Set all keyframes to their final state or use `animation: none` under the media query. The SVG is still visible and conveys "integrations connect here" without motion.

Frequently Asked Questions

Can I use lucide-react icons instead of SVG inline?

Yes. Import `Route`, `RefreshCw`, `CalendarSync`, `Brain`, `MapPinned`, `CalendarCheck`, `Flame` from lucide-react, wrap each in a container div, and position them at the same radial coordinates. You'll lose the integrated SVG animation (icons won't have stroke-dasharray), but the pulsing circles and lines still work. If you want icons to draw themselves, embed their paths as inline SVG or use `` with SVG URIs.

How do I connect this to real integration data?

Pass integration metadata (name, icon URL, color, link) as a JSON array, then render circles + paths dynamically. Use JavaScript to calculate radial positions (`cos(angle) * radius + centerX`) and generate path `d` attributes via a loop. Store animation offsets in CSS custom properties so each icon gets the correct delay. This scales to 10+ integrations without hand-coding positions.

Can I use GSAP instead of CSS keyframes?

Sure, but you don't need to. GSAP is powerful for scrubbing animations or orchestrating sequences with callbacks. Here, CSS keyframes handle the entire timeline. If you're already loading GSAP for other interactions on the page, GSAP's timeline API is cleaner than inline delays. Otherwise, pure CSS is lighter and faster.

What if I want the animation to loop continuously?

Remove `animation-fill-mode: forwards` and add `animation-iteration-count: infinite`. The hub spins, icons stagger in, paths draw, circles pulse — then everything resets and starts again. The reset might feel jarring; add a fade-out and pause before restart to smooth it. Alternatively, keep the 700ms reveal as a one-time entrance and let only the pulse circles loop infinitely.

How do I add interactivity (hover on an icon to highlight its connection)?

Use CSS `:hover` on the integration group to highlight that icon's path and glow-circle. Change the path stroke color on hover, brighten the circle, and maybe scale the icon slightly. No JavaScript needed — just CSS adjacent-sibling or child selectors. If you want a tooltip on hover, that requires JavaScript or a custom `