--- title: Two Circles, One Arrow, and Anchor Positioning –... description: A deep dive into using CSS anchor positioning to draw an arrow between two draggable circles, displaying the distance between them and detecting collisions —... canonical: https://daily.dev/posts/two-circles-one-arrow-and-anchor-positioning-frontend-masters-blog-jstnigzbr twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Two Circles, One Arrow, and Anchor Positioning – Frontend Masters Blog | daily.dev og:description: A deep dive into using CSS anchor positioning to draw an arrow between two draggable circles, displaying the distance between them and detecting collisions —... og:url: https://daily.dev/posts/two-circles-one-arrow-and-anchor-positioning-frontend-masters-blog-jstnigzbr og:image: https://api.daily.dev/og/posts/jstnIGZBR.png og:image:alt: Two Circles, One Arrow, and Anchor Positioning – Frontend Masters Blog og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Two Circles, One Arrow, and Anchor Positioning – Frontend Masters Blog **[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 16 min read · 3 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Connecting Circles With Anchor Positioning II](https://daily.dev/posts/connecting-circles-with-anchor-positioning-ii-nlqkriegr) · CSS Tip · 3 upvotes · 0 comments - [Bending a Straight Line using Modern CSS](https://daily.dev/posts/bending-a-straight-line-using-modern-css-ndim8doky) · CSS Tip · 20 upvotes · 3 comments - [Perfectly Pointed Tooltips: To The Corners – Frontend Masters Blog](https://daily.dev/posts/perfectly-pointed-tooltips-to-the-corners-frontend-masters-blog-8mt65kqgg) · Frontend Masters · 1 upvotes · 0 comments - [Connecting Circles With a Curved Line](https://daily.dev/posts/connecting-circles-with-a-curved-line-rr7nfo60b) · CSS Tip · 10 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/two-circles-one-arrow-and-anchor-positioning-frontend-masters-blog-jstnigzbr) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Two Circles, One Arrow, and Anchor Positioning – Frontend Masters Blog","url":"https://daily.dev/posts/two-circles-one-arrow-and-anchor-positioning-frontend-masters-blog-jstnigzbr","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/two-circles-one-arrow-and-anchor-positioning-frontend-masters-blog-jstnigzbr"},"datePublished":"2026-03-23T19:00:02.774Z","dateModified":"2026-03-23T19:00:33.772Z","description":"A deep dive into using CSS anchor positioning to draw an arrow between two draggable circles, displaying the distance between them and detecting collisions —...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a0db634becd37f1d2a4f8fe0c044ea31?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a0db634becd37f1d2a4f8fe0c044ea31?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Frontend Masters","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Frontend Masters","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f","url":"https://daily.dev/sources/frontendmasters"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/two-circles-one-arrow-and-anchor-positioning-frontend-masters-blog-jstnigzbr","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css","timeRequired":"PT16M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":3,"name":"Two Circles, One Arrow, and Anchor Positioning – Frontend Masters Blog"}]} ```