Как это сверстать?

[Schamil74]

Всем привет!

Как сверстать такую секцию(см. изображение)? Сверстать нужно так, чтобы при скроллинге (используя, например waypoints) постепенно грани заливались красным цветом от step1 до step4 (анимация). Появилась одна идея, создать многоугольник из линий в svg. Другой идеи в голову не пришло. Но такое искусство не масштабируется при адаптации. Как анимировать пока даже и не думал. Это учебный макет и экспериментальный макет.

 

Edited May 6, 2017 by Schamil74

[Igor Schnaider]

Во-первых, не надо рисовать вручную. Делайте в редакторе.

Нарисовали один многоугольник, клонировали его, поставили все на свои места. Оптимизатор их съест в один path. Отдельно — линия, которая будет иллюстрировать прогресс. И маска для картинки.

Сам текст можно простым HTML вставить поверх.

[Igor Schnaider]

В смысле не масштабируется? Вы, наверное, ширину фиксированную оставили просто.

https://codepen.io/anon/pen/qmVPde

[Schamil74]

Спасибо, что отозвались.

У меня нет концепции как это сверстать. Поэтому одной из идеи было сделать пять многоугольников. И стилизовать их как на картинке. На примере координаты линий я задавал в пикселях, может поэтому и не масштабируется.

Вопрос вообще можно поставить так:  Как это сверстать, в принципе?)))

 

Edited May 7, 2017 by Schamil74

[Schamil74]

Уважаемый, помогите с маской

 

Edited May 8, 2017 by Schamil74

[Schamil74]

Победил)))

https://schamil74.github.io/hexs/

 

Edited May 8, 2017 by Schamil74