Как сделать линии в перспективе (формула)?

Question

[AleBenEtoDanilaIneedHelp]

Svg и т.п. не подходит из соображений производительности. Проблема, что svg слишком тяжелая получается для таких "палочек", долго грузится, нагружает процессор, анимация проскакивает, если использовать тег img, например. В теге object не кэшируется изображение, если просить помощи у JS. Хотелось бы сделать это как-нибудь в автоматическом режиме, не расставляя каждую палочку руками :)
Мои тщетные попытки https://codepen.io/AleBenEtoDa...

Answer 1

[Rustam Bainazarov]

Но лучше через canvas, ибо тут всё зависит от ширины + очень муторное позиционирование, габариты, адаптивность и пр. Но можно с помощью медиазапросов, фиксированных габаритов решить эти проблемы, конечно, но это костыли и муторно.



Ну можно немного обмануть это, но всё равно это не очень то:


Можете, конечно, что-то из этого сделать, но лучше на canvas сделать, как я и сказал выше.

Answer 2

[Владимир Солнцев]

На css автоматически не получится.
Можно вставить картинкой через свойство background-image, нарисовать svg например.
Можно через канвас нарисовать.

Answer 3

[xmoonlight]

Через канвас однозначно, проще всего будет.
Цикл с приращениями по X и Y и всё.

Comments

[AleBenEtoDanilaIneedHelp]

xmoonlight Пусть это будет css-препроцессор, как произвести расчеты?)

[xmoonlight]

AleBenEtoDanilaIneedHelp, это уже сложно для ответа)

[AleBenEtoDanilaIneedHelp]

xmoonlight

X и Y и всё

Надеялся всей душой на быстрое решение вопроса)

[xmoonlight]

AleBenEtoDanilaIneedHelp, ну это только фанаты препроцессора могут)
Завтра придут - сделают халявно!))

[AleBenEtoDanilaIneedHelp]

xmoonlight, Да я про формулу)

[xmoonlight]

AleBenEtoDanilaIneedHelp, Таки я тоже)

[Владимир Солнцев]

AleBenEtoDanilaIneedHelp, какая формула? Она у вас уже в примере есть - обычный цикл. Просто переносите отрисовку на канвас, а дивы и css убираете. В цикле рисуете линии и смещаете по осям каждую итерацию на сколько вам нужно.