Ivan Bogachev

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

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

Если нужно сделать переменную толщину линий, как на картинке, то принцип будет тот же, но с дополнением: толщина линий делается довольно большой, а сверху к ним применяется 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 (можно добавить пре/пост-процессор по вкусу). Пример вашей анимации (я не старался повторить один в один и не проверял в чем-то, отличном от хрома, но мысль должна быть ясна).