Как можно сверстать такой блок адаптивно?
По сути была идея пунктиры положить и потом с помощью абсолюта расмещать шаги.
Но может тут через канвас будет лучше сделать? или мой вариант тут единственный?
Надеюсь по теме, предлагаю заглянуть под капот этой странички lemonade.com/giveback-2019, там как раз SVG, как по мне - один из лучших вариантов такого дизайнерского решения - там изначально 3 копии одного пути в 3 цветах и они закрашиваются по определенным правилам (кажется там массив со start/end/speed) в общем не пожалейте время и покопайтесь. Кстати на том сайте есть ещё несколько интересных страниц, например в /car они сделали аркаду частично на дивах, ну и в /giveback по годам пробежаться можно.
barraqud, Там не канвас, а несколько прорисованных для разных разрешений SVG, в которых динамически меняют процент прорисовки. Это если сильно упростить, конечно... Да, идея интересная и довольно эффективная.
Канвас неплохо работает, когда нужно динамически вычислять где какие фигуры прорисовывать, а SVG, когда уже примерно понятно в каких местах что рисовать. Тогда можно доверить художнику основную работу :)
Не могут нынче дизайнеры работать в блочной системе представления схем. Им кривые Безье и скруглённые углы подавай. Поэтому нужно извращаться с svg представлением.
Простой
