first commit
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user