Two Circles, One Arrow, and Anchor Positioning – Frontend Masters Blog

A deep dive into using CSS anchor positioning to draw an arrow between two draggable circles, displaying the distance between them and detecting collisions — all without JavaScript. The technique uses anchor positioning to create a bounding rectangle, clip-path with flipped pseudo-elements for directional arrows, container query units for geometry calculations (atan, hypot), CSS if() for shape switching, and counters to display computed distances. The article extends the concept to graph theory, implementing a shortest-path algorithm purely in CSS.