Два круга, одна стрелка и Anchor Positioning

Темани Афиф продолжает экспериментировать с различными свежими API, чтобы исследовать их пользу на практике.

Задача: соединить два круга стрелкой. Круги можно двигать при помощи JS. Для усложения над стрелкой нужно выводить расстояние между кругами, без JS. И двигать круги можно вообще как угодно. Темани по шагам, демка за демкой приходит к реализации.

А потом ради интереса реализует на CSS алгоритм нахождения кратчайшего пути в графе. Потому что может.

Когда-то давно у меня был доклад с названием «CSS — язык программирования». Кажется, пора с него сдуть пыль и переделать под современные реалии.

https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/