Как сверстать такой блок?

Question

[maralov]

Добрый день, коллеги.
Прошу вашей помощи поделиться опытом, идеей, мыслями как сверстать такой блок. Верстка под Вордпресс текст будет менять из админки

Вот сам блок

Comments

[Lord_Dantes]

Вот у дизайнера и спрашивайте, как вам такое сверстать :)

Варианты:
1. SVG с тегами text
2. Canvas

[maralov]

Lord_Dantes, да это как об стену с ними говорить...
спасибо вариант 1 буду крутить, сразу и не пришло в голову...

[WapSter]

maralov, работа дизайнера сделать макет, а не думать как тебе его верстать. https://github.com/anseki/leader-line

Answer 1

[Много Чего]

Может быть воспользоваться SVG ?

Comments

[maralov]

круто!!! спасибо , буду крутить ваш пример...

[Много Чего]

maralov, я делал руками то есть размеру от фанаря - вам надо делать под ваши нужды - скорее всего через редактор SVG когда узнаете что это такое то будете рисовать руками

[tugens111]

Много Чего, а можете пожалуйста посоветовать редактор для свг чтоб в нем можно было бы быстро разобраться? ну или просто лучший на ваш взгляд )

[Много Чего]

tugens111, я раньше пользовался inkscape - иллюстратор сложный - корел драв тоже ничё го так - я привык писать svg руками - года два уже пишу руками

Answer 2

[RAX7]

Сетку на гридах сделать

spoiler

Блоки посдвигать transform`ом для придания хаотичности. Соединительные линии нарисовать с помощью LeaderLine