Соединить несколько div линией?

Question

[formasters777]

У меня есть div с элементами и необходимо соединить их линиями,
один вариант можно сделать релатив div, и все элементы внутри сделать в позиции absolute и позиционировать их,
так соединить конечно можно, но при сужении нужно будет делать переменной точку соединения линий,
и это сложней сделать респонзив,
остановился на варианте, дисплей флекс, колонка, и маргин слева чтоб было в виде полукруга,
но как в этом случае соединять линии с кружком,
что для таких целей лучше использовать, svg, canvas, js или react библиотеку,
если библиотека весит 150кб, а использоваться будет только соединение таких кнопок, намного ли увеличится размер бандла?
Возможно ли это всё сделать в canvas или будет сложно соединять canvas с React, ссылки в canvas.

Comments

[Ankhena]

https://github.com/anseki/leader-line

https://codepen.io/AnnaSummer/pen/eYVeWXR
https://codepen.io/AnnaSummer/pen/QWQOvzy

[Сергей delphinpro]

Подложить под эту всю фигню canvas, вычислять положение элементов и рисовать линии. Никакие библиотеки не нужны.

[formasters777]

Ankhena,
спасибо,
я построил круг, и выполнил его настройку,
в библиотеках типа leader-line или leader-line-new, react-xarrows можно ли соединить линией элементы из разных позиций position: absolute и relative, то есть кнопки находятся в грид флекс контейнере, а круг в позиции абсолют,
их можно таким образом соединять?, или и кнопки и круг должны быть в одном контейнере,
пока я пробовал только react-xarrows:

<Xwrapper>
      <Xarrow start={"comp1"} end={"comp2"}  />
 </Xwrapper>

или тут нужно создавать глобальный контекст, оборачивать провайдером всё.

[formasters777]

Сергей delphinpro,
думал о чём-то подобном, но пока нашёл только один пример, который можно использовать,
люблю css и html,
но, после экспорта через плагин в фигме, получил тот же сss, но в позиции абсолют,
и теоретически, если сделать слушатель ширины окна, можно попробовать сдвигать элементы хотя вправо, и это также может быть альтернативным решением,
хотя сделать это в canvas скорей всего также можно.