Как сверстать такую объемную диаграмму?

Question

[alex-1917]

Давно не задавал вопросов)))
Кто и как бы сверстал такую объемную диаграмму? Естессно, проценты могут меняться...
Это не клиенту и не для проекта, просто нашел прикольную картинку и подумал, а неплохо бы её заверстать, где-нибудь точно пригодилось бы в будущем.
А может и не пригодится...
Но все равно интересно...

Comments

[alex-1917]

кстати, на синем кубике донышко неправильно отрисовано)))

Answer 1

[Никита Егоров]

Ну если дело в 3d кубах, то вот, красивое решение.

Answer 2

[dollar]

Мне кажется, что canvas идеально подходит в качестве простого решения (в плане реализации).

Хотя можно извратнуться. Полупрозрачные PNG разных цветов с абсолютным позиционированием. Отдельно "крышка", и отдельно "шаг в 5%", который дублируется.

Comments

[alex-1917]

ну да, так и я думал. кстати, на синем кубике донышко неправильно отрисовано)))

Answer 3

[profesor08]

Ну, картинка рисованная, причем не соблюдена прозрачность с учетом градиентов в некоторых местах. Чисто на CSS не выйдет, будут торчать ненужные углы, так как все стороны прозрачные.

На SVG возможно, ~3 path на кубик, и как-то залить их градиентом более менее похоже. Оперировать высотой будет проблематично, надо будет заново генерировать d для path.

Ну, а на canvas будет проще всего, там только сделать фигуру и вытянуть ее, задать цвет и поместить источники света для подсветки, и все.