Как такое верстают?

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

Нет практически ничего, что нельзя было бы реализовать из того, что "приходит" от дизайнера. Любой эффект можно имплементировать одним из множества способов: CSS, Javascript, Canvas, WebGL и т.д.

NikitaKA, остается только понять стоит ли вся эта наркомания денег, потраченных на её реализацию.

NikitaKA, ну он имел ввиду не то, что это супер сложно или невозможно реализовать, а то, что пунктиры как дизайнерская задумка не имеет никакой смысловой нагрузки, т.е. то зачем этот пунктир обычно рисуют. Все он грамотно подумал. И даже то, что диз должен уметь верстать. Если бы он знал, что это достаточно трудоемкая разработка и что она несет за собой несоразмерные нагрузки, то не стал бы тратить время разработчиков и деньги заказчиков на бессмысленные элементы "дэкора".

Где не нужен (на мобилках) - не рисуем!

Тогда зачем JS? Статичный SVG (или вообще PNG) для широких экранов, когда влезает четыре столбца кружков с фотками. Иначе, как вы говорите — не рисуем.

AngReload, ну я немного не точно выразился: я бы рисовал пунктир везде, т.к. юзал бы JS.
А так - да. Если не рисуем, то можно и просто SVG(PNG).

Думаю, что ТС находится в фотошопе с "подарком для размышления" от дизайнера)))

Олег, я даже и не сомневаюсь, что это именно так)

xmoonlight, Олег,
нда дизайнеры это еще те люди
мне недавно для верстки прислали psd шириной 2560 пикселей
пришлось капитально помучится чтобы нормально смотрелось и при меньших разрешениях

Дмитрий, ну надо по рукам дизайнерам за такое сразу!
Есть стандарты - по ним пусть и работают.

Дмитрий, Не знаю какое именно вам псд прислали, но 2560 пикселей уже вошли в обиход... Вы бы лучше с заказчиком уточнили под какие экраны вам нужно верстать, а то в данном контексте ваше недовольство не обосновано.

xmoonlight, Вы ничего не упускаете? Это и есть один из стандартов..

Виталий, естественно все уточнено 1024 и шире))

Дмитрий, может 2560 - это один из следующих брейкпоинтов после 1024 ?
Вообще должно было быть несколько макетов разной ширины. В зависимости от обусловленных контрольных точек (breakpoint). И заметьте, Если вам дали макет 2560, значит все что в нем нарисовано должно быть показано при разрешениях ОТ 2560. То, что ДО 2559 включительно должно быть в другом макете. Например 1980.

о разных макетах и речи не шло
дизайнеру в принципе фиолетово как будет реализовываться им нарисованное

Дмитрий, это был не дизайнер, а говно. Дизайнер должен учитывать не только разрешение 2560, но и все другие разрешения.

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

P. S. Если меня читает дизайнер, коим я тоже являюсь, пожалуйста, не делайте так как никогда, не ленитесь. И обязательно изучайте вёрстку :))

Я заметил что если работаешь с по настоящему крутыми дизайнерами, то таких вопросов не возникает, всё и так очевидно. А вот когда всё отрисовано, но не понятно как это верстать, то это как раз признак низкой квалификации дизайнера.

- А давай подарим ему зажигалку?
- Он не курит...
- А давай тогда подарим ему штаны такие зеленые, куртку из обезьяны и...
- И ты не кури...