Ivan Bogachev

Используя чисто SVG так сделать не получится. Тут есть два пути решения проблемы:

1. Первый - убрать preserveAspectRatio и сделать все на скриптах, то есть все координаты на SVG будут рассчитываться по ходу дела. Этот способ будет хорошим выбором, если у вас данные постоянно меняются и нужно все перерисовывать, на лету менять тип графика и.т.д.
   
2. Второй путь - поверх SVG положить еще один слой и на нем расположить точки, текст и все, что там еще нужно. Этот вариант можно набросать по-быстрому (пример) и он хорош в случае, когда данные сильно не меняются (или вообще не меняются - только один раз с сервера прилетают) и нужно простое решение без особой js-логики.
   

Как разумнее такое реализовать? По идеи полоски и синие точки должны крутиться в разные стороны, с keyframes верстать?

1. Рисуете все эти дуги, точки и иконки в SVG.
2. Дуги и точки анимируете с помощью transform:rotate и keyframes (поворот от 0 до 1turn, в этом нет ничего сильно замороченного, но оставлю пример для изучения), каждой ставите свое время полного оборота по вкусу.
3. Иконки винды, ведра и айоси подвергаете извороту "туда-обратно" (как в этом примере). Обертку крутите в одну сторону, а иконку в другую - будет выглядеть, как будто они летают по кругу.

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

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

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

Можно поиграть с stroke-dasharray у этой линии (наводящий пример и статья вдогонку, чтобы понимать контекст).

Вот вам наглядный пример того, как все будет тормозить, вплоть до зависания страницы, если применить фильтры и все немного увеличить (и не говорите, что на вашем 12ядерномразогнанноммакпро не тормозит - у пользователя его не будет). Поэтому если выбор пал на SVG - анимируйте path, а потом заливайте его градиентом, как это и сделано на картинке. В простейшем виде можно сразу нарисовать десяток состояний каждой кляксы и последовать примерам из вот этой статьи.

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

но сам пак иконок становится чёрно белыми...

В видео с помощью сервиса fontello создается иконочный шрифт, который по смыслу не подразумевает наличие определенного цвета. Как и при использовании любого другого шрифта вы можете использовать CSS свойство color для того, чтобы задать цвет символам. Если вы хотите создать набор иконок, каждая из которых будет состоять из несколько цветов - шрифт вам не подойдет. Как вариант можно использовать SVG symbols, подробнее в этой статье.

проблема в том, что мне нужно рисовать сами буквы, а не их обводку, как это сделать?

Вам нужно взять векторный графический редактор и нарисовать path`ы не по контуру ваших линий, образующих буквы, а вдоль них, по их середине (если относительно линии можно сказать "середина"), в том направлении, в котором буквы пишутся. Потом задать получившимся path`ам большое значение stroke-width и сделать то, что вы уже сделали с anime.js в вашем примере. Получится примерно то, что вы хотите увидеть. Также будет не лишним взглянуть на свойство stroke-linecap, чтобы добавить округлостей и сделать линию более естественной.

PS.: Очевидная проблема такого подхода - сложно сделать именно такие скругления на краях букв, как вы нарисовали. Так что если вы хотите в браузере анимировать "рисование" того, что есть, единственный путь - анимация фона у уже имеющихся path-элементов. По сути нужно будет сделать все возможные фоны у каждой буквы по мере ее рисования. Начальный запрос в гугл - fill SVG path element with a background-image, дальше - CSS анимации. Это очень долго, сложно и будет сильно тормозить. В таком случае я бы склонился к тому, чтобы в Ae все нарисовать и гифкой вставить.

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