Network Graph

Nodes and relationships.

html

<figure class="network network--circular" style="--accent:#BFD9F2;--r:9;" role="img" aria-label="Network diagram, circular layout, showing 5 connected nodes">
  <svg class="network__svg" viewBox="0 0 260 160" xmlns="http://www.w3.org/2000/svg">
    <g class="graph graph--circular">
      <line class="ng-edge" x1="130" y1="25" x2="185" y2="55"></line>
      <line class="ng-edge" x1="185" y1="55" x2="165" y2="120"></line>
      <line class="ng-edge" x1="165" y1="120" x2="95" y2="120"></line>
      <line class="ng-edge" x1="95" y1="120" x2="75" y2="55"></line>
      <line class="ng-edge" x1="75" y1="55" x2="130" y2="25"></line>
      <line class="ng-edge" x1="130" y1="25" x2="95" y2="120"></line>
      <circle class="ng-node" cx="130" cy="25"></circle>
      <circle class="ng-node" cx="185" cy="55"></circle>
      <circle class="ng-node" cx="165" cy="120"></circle>
      <circle class="ng-node" cx="95" cy="120"></circle>
      <circle class="ng-node" cx="75" cy="55"></circle>
      
      <text class="ng-label" x="130" y="14">A</text>
      <text class="ng-label" x="199" y="55">B</text>
      <text class="ng-label" x="178" y="137">C</text>
      <text class="ng-label" x="82" y="137">D</text>
      <text class="ng-label" x="61" y="55">E</text>
      
    </g>
    <g class="graph graph--hierarchical">
      <line class="ng-edge" x1="130" y1="20" x2="75" y2="75"></line>
      <line class="ng-edge" x1="130" y1="20" x2="185" y2="75"></line>
      <line class="ng-edge" x1="75" y1="75" x2="45" y2="135"></line>
      <line class="ng-edge" x1="75" y1="75" x2="110" y2="135"></line>
      <circle class="ng-node" cx="130" cy="20"></circle>
      <circle class="ng-node" cx="75" cy="75"></circle>
      <circle class="ng-node" cx="185" cy="75"></circle>
      <circle class="ng-node" cx="45" cy="135"></circle>
      <circle class="ng-node" cx="110" cy="135"></circle>
      
      <text class="ng-label" x="130" y="10">Root</text>
      <text class="ng-label" x="75" y="65">A</text>
      <text class="ng-label" x="185" y="65">B</text>
      <text class="ng-label" x="45" y="150">A1</text>
      <text class="ng-label" x="110" y="150">A2</text>
      
    </g>
  </svg>
</figure>
<style>
.network { max-width: 320px; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px; box-sizing: border-box; }
.network__svg { width: 100%; height: auto; display: block; }
.network .graph { display: none; }
.network--circular .graph--circular { display: block; }
.network--hierarchical .graph--hierarchical { display: block; }
.network .ng-edge { stroke: #24143055; stroke-width: 1.5; }
.network .ng-node { fill: var(--accent); stroke: #241430; stroke-width: 1.5; r: var(--r); }
.network .ng-label { fill: #241430; font-size: 9px; text-anchor: middle; }
</style>

tailwind

<figure class="network-tw network-tw--circular max-w-xs p-3 font-sans text-[#241430] bg-[#FAF7F2] box-border" style="--accent:#BFD9F2;--r:9;" role="img" aria-label="Network diagram, circular layout, showing 5 connected nodes">
  <svg class="network-tw__svg w-full h-auto block" viewBox="0 0 260 160" xmlns="http://www.w3.org/2000/svg">
    <g class="graph graph--circular">
      <line class="ng-edge" x1="130" y1="25" x2="185" y2="55"></line>
      <line class="ng-edge" x1="185" y1="55" x2="165" y2="120"></line>
      <line class="ng-edge" x1="165" y1="120" x2="95" y2="120"></line>
      <line class="ng-edge" x1="95" y1="120" x2="75" y2="55"></line>
      <line class="ng-edge" x1="75" y1="55" x2="130" y2="25"></line>
      <line class="ng-edge" x1="130" y1="25" x2="95" y2="120"></line>
      <circle class="ng-node" cx="130" cy="25"></circle>
      <circle class="ng-node" cx="185" cy="55"></circle>
      <circle class="ng-node" cx="165" cy="120"></circle>
      <circle class="ng-node" cx="95" cy="120"></circle>
      <circle class="ng-node" cx="75" cy="55"></circle>
      
      <text class="ng-label" x="130" y="14">A</text>
      <text class="ng-label" x="199" y="55">B</text>
      <text class="ng-label" x="178" y="137">C</text>
      <text class="ng-label" x="82" y="137">D</text>
      <text class="ng-label" x="61" y="55">E</text>
      
    </g>
    <g class="graph graph--hierarchical">
      <line class="ng-edge" x1="130" y1="20" x2="75" y2="75"></line>
      <line class="ng-edge" x1="130" y1="20" x2="185" y2="75"></line>
      <line class="ng-edge" x1="75" y1="75" x2="45" y2="135"></line>
      <line class="ng-edge" x1="75" y1="75" x2="110" y2="135"></line>
      <circle class="ng-node" cx="130" cy="20"></circle>
      <circle class="ng-node" cx="75" cy="75"></circle>
      <circle class="ng-node" cx="185" cy="75"></circle>
      <circle class="ng-node" cx="45" cy="135"></circle>
      <circle class="ng-node" cx="110" cy="135"></circle>
      
      <text class="ng-label" x="130" y="10">Root</text>
      <text class="ng-label" x="75" y="65">A</text>
      <text class="ng-label" x="185" y="65">B</text>
      <text class="ng-label" x="45" y="150">A1</text>
      <text class="ng-label" x="110" y="150">A2</text>
      
    </g>
  </svg>
</figure>
<style>
.network-tw { max-width: 320px; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px; box-sizing: border-box; }
.network-tw__svg { width: 100%; height: auto; display: block; }
.network-tw .graph { display: none; }
.network-tw--circular .graph--circular { display: block; }
.network-tw--hierarchical .graph--hierarchical { display: block; }
.network-tw .ng-edge { stroke: #24143055; stroke-width: 1.5; }
.network-tw .ng-node { fill: var(--accent); stroke: #241430; stroke-width: 1.5; r: var(--r); }
.network-tw .ng-label { fill: #241430; font-size: 9px; text-anchor: middle; }
</style>

react

export function NetworkGraph({
  layout = "circular",
  accent = "#BFD9F2",
  showLabels = true,
  nodeSize = 9,
}) {
  const nodesCircular = [[130,25,"A"],[185,55,"B"],[165,120,"C"],[95,120,"D"],[75,55,"E"]];
  const edgesCircular = [[130,25,185,55],[185,55,165,120],[165,120,95,120],[95,120,75,55],[75,55,130,25],[130,25,95,120]];
  const nodesHier = [[130,20,"Root"],[75,75,"A"],[185,75,"B"],[45,135,"A1"],[110,135,"A2"]];
  const edgesHier = [[130,20,75,75],[130,20,185,75],[75,75,45,135],[75,75,110,135]];
  const nodes = layout === "hierarchical" ? nodesHier : nodesCircular;
  const edges = layout === "hierarchical" ? edgesHier : edgesCircular;
  return (
    <figure role="img" aria-label={`Network diagram, ${layout} layout, showing 5 connected nodes`}
      style={{ maxWidth: 320, padding: 12, font: "12px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", boxSizing: "border-box" }}>
      <svg viewBox="0 0 260 160" style={{ width: "100%", height: "auto", display: "block" }}>
        {edges.map(([x1, y1, x2, y2], i) => (
          <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#24143055" strokeWidth={1.5} />
        ))}
        {nodes.map(([cx, cy], i) => (
          <circle key={i} cx={cx} cy={cy} r={nodeSize} fill={accent} stroke="#241430" strokeWidth={1.5} />
        ))}
        {showLabels && nodes.map(([cx, cy, label], i) => (
          <text key={i} x={cx} y={cy - (layout === "hierarchical" ? 10 : 11)} fill="#241430" fontSize={9} textAnchor="middle">{label}</text>
        ))}
      </svg>
    </figure>
  );
}