NetworkGraph

networkgraph-1779388706147.tsx

'use client';
import { useState, useEffect, useRef } from 'react';

export default function NetworkGraph() {
  const svgRef = useRef(null);
  const [nodes] = useState([
    { id: 0, x: 150, y: 80, label: 'Core API', type: 'primary' },
    { id: 1, x: 60, y: 180, label: 'Auth', type: 'secondary' },
    { id: 2, x: 240, y: 180, label: 'Database', type: 'secondary' },
    { id: 3, x: 30, y: 290, label: 'OAuth', type: 'tertiary' },
    { id: 4, x: 130, y: 290, label: 'Cache', type: 'tertiary' },
    { id: 5, x: 240, y: 290, label: 'Storage', type: 'tertiary' },
    { id: 6, x: 290, y: 180, label: 'Queue', type: 'secondary' },
  ]);
  const edges = [[0,1],[0,2],[0,6],[1,3],[2,4],[2,5]];
  const [hovered, setHovered] = useState(null);
  const [pulse, setPulse] = useState(0);

  useEffect(() => {
    const t = setInterval(() => setPulse(p => (p + 1) % edges.length), 800);
    return () => clearInterval(t);
  }, []);

  const nodeColor = t => t === 'primary' ? '#C9A84C' : t === 'secondary' ? '#6366f1' : 'rgba(255,255,255,0.15)';
  const nodeBorder = t => t === 'primary' ? '#e8c96d' : t === 'secondary' ? '#818cf8' : 'rgba(255,255,255,0.3)';

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.07)', borderRadius: '16px', padding: '16px' }}>
      <h3 style={{ color: '#F5F5F0', margin: '0 0 12px 0', fontSize: '13px', fontWeight: 700 }}>Service Architecture</h3>
      <svg ref={svgRef} width="330" height="340" style={{ overflow: 'visible' }}>
        {edges.map(([from, to], i) => {
          const n1 = nodes[from], n2 = nodes[to];
          const isActive = pulse === i;
          return (
            <line key={i} x1={n1.x} y1={n1.y} x2={n2.x} y2={n2.y}
              stroke={isActive ? '#C9A84C' : 'rgba(255,255,255,0.1)'}
              strokeWidth={isActive ? 2 : 1}
              style={{ transition: 'stroke 0.3s, stroke-width 0.3s', filter: isActive ? 'drop-shadow(0 0 4px #C9A84C)' : 'none' }}
            />
          );
        })}
        {nodes.map(n => (
          <g key={n.id} onMouseEnter={() => setHovered(n.id)} onMouseLeave={() => setHovered(null)} style={{ cursor: 'pointer' }}>
            <circle cx={n.x} cy={n.y} r={hovered === n.id ? 26 : 22}
              fill={nodeColor(n.type)} stroke={nodeBorder(n.type)} strokeWidth="2"
              style={{ transition: 'r 0.2s ease', filter: hovered === n.id ? `drop-shadow(0 0 10px ${nodeColor(n.type)})` : 'none' }}
              fillOpacity={0.15}
            />
            <circle cx={n.x} cy={n.y} r={8} fill={nodeColor(n.type)} style={{ filter: `drop-shadow(0 0 4px ${nodeColor(n.type)})` }} />
            <text x={n.x} y={n.y + 36} textAnchor="middle" fill={hovered === n.id ? '#F5F5F0' : 'rgba(245,245,240,0.5)'} fontSize="11" fontFamily="system-ui" style={{ transition: 'fill 0.2s' }}>{n.label}</text>
          </g>
        ))}
      </svg>
    </div>
  );
}

Component info

CategoryData Visualization

Frameworkreact

TierFREE

Copies0

About

Interactive node graph with animated connections

More from Data Visualization

'use client'
import { useState } from 'react'

const SEGMENTS = [
  { label: 'Buttons', value: 12, color: '#C9A84C' },
  { label: 'Forms', value: 10, color: '#6366f1' },
  { label: 'Navigation', value: 8, color: '#22c55e' },
  { label: 'Dashboard', v

DonutChart

Data Visualization

'use client'
import { useEffect, useState } from 'react'

interface Metric {
  label: string
  value: number
  max: number
  color: string
  unit: string
}

const metrics: Metric[] = [
  { label: 'CPU Usage', value: 72, max: 100, color: '#C9A84C', un

RadialProgress

Data Visualization

'use client';
import { useState, useEffect } from 'react';

export default function MetricGauge({ value = 73, max = 100, label = "Performance Score", unit = "%" }) {
  const [animated, setAnimated] = useState(0);

  useEffect(() => {
    const timer

MetricGauge

Data Visualization

'use client';
import { useState, useEffect } from 'react';

export default function SplitTestWidget() {
  const [animating, setAnimating] = useState(false);
  const tests = [
    { name: 'CTA Button Color', varA: { label: 'Blue', value: 3.2, users: 4

SplitTestWidget

Data Visualization