+ {/* Rings */}
+ {RINGS.map((r, i) => (
+
+ ))}
+
+ {/* Central users icon */}
+
+
+
+
+ {/* Surrounding user icons */}
+ {(
+ [
+ { initialDeg: 30, duration: 20, icon: "user" },
+ { initialDeg: 190, duration: 25, icon: "user" },
+ { initialDeg: 320, duration: 15, icon: "user" },
+ { initialDeg: 280, duration: 20, icon: "building" },
+ ] as Array<{ initialDeg: number; duration: number; icon: IconName }>
+ ).map(({ initialDeg, duration, icon }, index) => {
+ const r = RINGS[index % RINGS.length]; // icon orbit radius - each icon on a different ring (we have more icons than ring so we cycle through them)
+ const steps = 60;
+ const xKeyframes = [];
+ const yKeyframes = [];
+ for (let i = 0; i <= steps; i++) {
+ const angle = initialDeg + (360 * i) / steps;
+ xKeyframes.push(r * Math.cos((angle * Math.PI) / 180));
+ yKeyframes.push(r * Math.sin((angle * Math.PI) / 180));
+ }
+
+ return (
+
+ // Lock the icon to the center of the ring and only translate on x and y
+ `translate(-50%, -50%) translateX(${x}) translateY(${y})`
+ }>
+
+
+ );
+ })}
+