From c50af6a2f6b241859354c1c47946f39e807fdd5a Mon Sep 17 00:00:00 2001
From: Rahul Vyas <rahulvyas.5100@gmail.com>
Date: Sat, 20 Jun 2026 22:31:40 +0530
Subject: [PATCH] feat: add contributor avatars with circular clipping and
 border

---
 src/pages/NetworkPage.jsx | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/pages/NetworkPage.jsx b/src/pages/NetworkPage.jsx
index 22ff154..5364d29 100644
--- a/src/pages/NetworkPage.jsx
+++ b/src/pages/NetworkPage.jsx
@@ -93,10 +93,33 @@ export default function NetworkPage() {
           .attr('fill', healthColor(d.data.healthScore || 0))
           .attr('stroke', '#0d0d0d').attr('stroke-width', 1.5)
       } else {
+        const r = contribR(d.data.totalContribs || 1)
+
+        const clipId = `avatar-clip-${d.id}`
+
+        svg.append('defs')
+          .append('clipPath')
+          .attr('id', clipId)
+          .append('circle')
+          .attr('r', r)
+          .attr('cx', 0)
+          .attr('cy', 0)
+
+        // Avatar image
+        el.append('image')
+          .attr('href', d.data.avatar_url)
+          .attr('x', -r)
+          .attr('y', -r)
+          .attr('width', r * 2)
+          .attr('height', r * 2)
+          .attr('clip-path', `url(#${clipId})`)
+
+        // Border around avatar
         el.append('circle')
-          .attr('r', contribR(d.data.totalContribs || 1))
-          .attr('fill', d.data.isConnector ? '#f5c518' : '#555')
-          .attr('stroke', '#0d0d0d').attr('stroke-width', 1.5)
+          .attr('r', r)
+          .attr('fill', 'none')
+          .attr('stroke', d.data.isConnector ? '#f5c518' : '#555')
+          .attr('stroke-width', 2)
       }
       const labelY = d.type === 'repo'
         ? repoRadius(d.data.stargazers_count || 0) + 11