Как верстать элементы инфографики в HTML?

я бы сделал для блоков типа "костные ткани" враппер, внутри абсолютно позиционированных блоков (можно и одним обойтись) для которых добавить псевдо до\после для горизонтальной\вертикальной линии
Для каждого блока разные параметры длины\отступов и для базовых медиа точек в стилях проставить свои значения
Либо SVG, но это и сложнее и дольше.

Либо вообще одной картинкой с параметром background-size:cover
Будет не очень на совсем мобильных (от 400 пкс и ниже) но тоже как вариант вообще без геморроя

jsfiddle.net/x2tLk07d это баловство но я показываю просто для примера на что способен SVG для реального примера можно отрисовать идеально

Нужен "бутерброд" (снизу вверх, к пользователю):
1. Человек и линии - SVG. ("подложка")
2. Блоки надписей (с круглыми пиктограммами) - контейнер DIV'ов. (основной текстовый контент)

Порядок создания:
1. Начинаем с п.2 (создаём контейнер DIV'ов с надписями внутри), т.к. нам нужен размер SVG на основе контейнера DIV.
2. Создаём SVG (точно ПОД контейнером DIV'ов с той же позицией и того же размера).
После того, как это сделано - динамически создаём соединительные линии используя координаты соединительных точек блока-человека и блоков-надписей (все вычисления и прорисовка линий на SVG - через JS).