@buzzloud
very beginner developer

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

Привет всем. Помогите разобраться как сделать анимацию как в примере:
5aca15042af2a192738725.jpeg
Смысл такой: из точки в верхнем левом углу выходит линия, которая переходит в какую либо другую точку на карте. Следующая линия также выходит из первоначальной точки, но уже переходит в другую точку на карте и т.д. (в примере на фото происходит чуток не так, как я описал, но суть надеюсь понятна).
Вообщем, как возможно сделать такое или может есть похожие примеры на codepen. Буду очень признателен за помощь, заранее спасибо.
  • Вопрос задан
  • 340 просмотров
Пригласить эксперта
Ответы на вопрос 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Смысл такой: из точки в верхнем левом углу выходит линия, которая переходит в какую либо другую точку на карте. Следующая линия также выходит из первоначальной точки, но уже переходит в другую точку на карте и т.д. Вообщем, как возможно сделать такое

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы