Dynamic Circular Avatar Gallery

This is a Dynamic Circular Avatar Gallery. It arranges a series of profile images into a perfect circle that smoothly expands when interacted with. Its function is to showcase user groups or team members in a compact, engaging format, using cutting-edge CSS math instead of JavaScript to handle complex radial positioning and dynamic item counting.

Specs

• Weight: ~2 KB. Zero dependencies. No JavaScript.
• Performance: High. Calculations are handled by the CSS engine, though the combination of mask and drop-shadow on multiple overlapping elements might slightly impact rendering on very low-end GPUs.
• Theming / Customization: Fully parameterized. Modifying --s (image size) or --g (gap) automatically recalculates the entire circular radius and spacing via CSS variables.
• Responsiveness: Utilizes CSS Container Queries (container-type: inline-size) and min() functions to adapt the circle radius directly to the available container width.
• Graceful Degradation: [!] Highly experimental. Relies heavily on sibling-index(), sibling-count(), and CSS trigonometric functions (sin, cos). In unsupported browsers, avatars will stack in the center without forming a circle.

Anatomy

The structure replaces script-based array mapping with declarative HTML and procedural CSS.

• HTML (The Skeleton): A simple .container wrapper holding multiple <img> tags. An optional .reverse class inverts the rotational hover behavior.
• CSS (The Skin): Employs @property to allow interpolating custom angle variables (--_i, --_j). Transforms (rotate and translate) place the images radially. A radial-gradient mask trims overlapping edges to maintain perfect gaps between the circles.
• JS (The Nervous System): Absent. The logic is strictly state-driven.

Logic

The standout technical achievement is the “Procedural Radial Distribution”:

--_r: min(50cqw - var(--s)/2, (var(--s) + var(--g))/(2*sin(.5turn/sibling-count())));
--_i: calc(1turn*sibling-index()/sibling-count() + var(--_ii,0deg));

Instead of hardcoding angles or relying on JS to distribute the items, the CSS engine dynamically counts the total number of children (sibling-count()) and assigns an angular position based on their specific index (sibling-index()). The radius (--_r) is mathematically derived using the sine function to ensure all avatars fit perfectly around the perimeter, flawlessly adjusting whether you add 3 or 30 <img/> elements to the DOM.

Feel

Fluid and deeply mathematical. Hovering over an avatar triggers a ripple-like expansion: the targeted image locks in place while adjacent avatars slide along the perimeter to create breathing room. The movement feels highly organic, governed by the linear transition of precise geometric angles rather than arbitrary pixel translations.