72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
interface NetworkGraphicProps {
|
|
accent?: "blue" | "green";
|
|
className?: string;
|
|
}
|
|
|
|
const nodes = [
|
|
{ x: 40, y: 40, r: 3 },
|
|
{ x: 140, y: 20, r: 2.5 },
|
|
{ x: 220, y: 70, r: 4 },
|
|
{ x: 300, y: 30, r: 2.5 },
|
|
{ x: 90, y: 130, r: 2.5 },
|
|
{ x: 190, y: 150, r: 3.5 },
|
|
{ x: 280, y: 130, r: 2.5 },
|
|
{ x: 20, y: 190, r: 2 },
|
|
{ x: 340, y: 190, r: 3 },
|
|
];
|
|
|
|
const edges: [number, number][] = [
|
|
[0, 1],
|
|
[1, 2],
|
|
[2, 3],
|
|
[1, 4],
|
|
[4, 5],
|
|
[5, 6],
|
|
[2, 5],
|
|
[4, 7],
|
|
[6, 8],
|
|
[0, 4],
|
|
];
|
|
|
|
export default function NetworkGraphic({
|
|
accent = "blue",
|
|
className = "",
|
|
}: NetworkGraphicProps) {
|
|
const stroke = accent === "green" ? "#12B76A" : "#3B7BFF";
|
|
const dot = accent === "green" ? "#6EE7B7" : "#6FA8FF";
|
|
|
|
return (
|
|
<svg
|
|
viewBox="0 0 360 220"
|
|
className={className}
|
|
aria-hidden="true"
|
|
role="img"
|
|
>
|
|
<g opacity="0.55">
|
|
{edges.map(([a, b], i) => (
|
|
<line
|
|
key={i}
|
|
x1={nodes[a].x}
|
|
y1={nodes[a].y}
|
|
x2={nodes[b].x}
|
|
y2={nodes[b].y}
|
|
stroke={stroke}
|
|
strokeWidth="1"
|
|
/>
|
|
))}
|
|
</g>
|
|
{nodes.map((n, i) => (
|
|
<circle
|
|
key={i}
|
|
cx={n.x}
|
|
cy={n.y}
|
|
r={n.r}
|
|
fill={dot}
|
|
className="animate-pulse-slow"
|
|
style={{ animationDelay: `${(i % 5) * 0.6}s` }}
|
|
/>
|
|
))}
|
|
</svg>
|
|
);
|
|
}
|