Connecting Circles With Anchor Positioning II

January 08, 2026

Improving the previous implementation to include the calculation of the distance between both circles inside the arrow shape.

CSS-only connected circles with distance

Still the same code structure

<div class="circle" name="--a" size="150px"></div><div class="circle" name="--b" size="100px"></div><div class="arrow" x="--a" y="--b" size_x="150px" size_y="100px"> ...</div>

.arrow {  --r: 25px; --a: 40deg; --d: 5px;  --g: 10px;  --c: #556270;}

Drag the circles in the demo below and see how the value updates:

⚠️ Chrome-only for now ⚠️

And another demo with more than two circles

Recreating the component and its Using basic HTML and a few lines of CSS to recreate the fieldset component. January 21, 2026
Connecting Circles With Anchor Positioning Using modern CSS to create a dynamic link that connects two circles, whatever their position. December 16, 2025
Fizz Buzz using Modern CSS (no HTML) A fun experiment using modern CSS to create the classic Fizz Buzz. December 06, 2025