SVG и анимация — как собрать в кучу и сделать?

Question

[buzzloud]

Привет всем. Помогите разобраться как сделать анимацию как в примере:

Смысл такой: из точки в верхнем левом углу выходит линия, которая переходит в какую либо другую точку на карте. Следующая линия также выходит из первоначальной точки, но уже переходит в другую точку на карте и т.д. (в примере на фото происходит чуток не так, как я описал, но суть надеюсь понятна).
Вообщем, как возможно сделать такое или может есть похожие примеры на codepen. Буду очень признателен за помощь, заранее спасибо.

Answer 1

[Ivan Bogachev]

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

Рисуете эти линии в векторном графическом редакторе (каждую по отдельности); затем действуете по принципу, описанному в этой статье, чтобы эти линии прорисовывались от начала до конца.

Если нужно сделать переменную толщину линий, как на картинке, то принцип будет тот же, но с дополнением: толщина линий делается довольно большой, а сверху к ним применяется SVG-маска (как с ними работать описано вот в этой статье), состоящая из кривых вытянутых треугольников (не знаю, как описать по-русски изогнутую линию переменной толщины, но по вашей картинке понятно, о чем речь).

Comments

[buzzloud]

Спасибо, попробую)