Ivan Bogachev

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

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

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

Как сделать на чистом css?

Сергей говорит, что CSS не может отслеживать скролл и это действительно так. Его вариант решения задачи является общепринятым и я бы тоже использовал его. Но если вы хотите доказать, что у вас скилл CSS равен 95% - придется шаманить. Мысль следующая: если взять большой блок с кривым градиентом и аккуратно перекрыть его слоями, которые не будут скроллиться (position: sticky будет очень кстати), оставив небольшую видимую полоску, то можно получить занятный эффект зависимости содержимого полоски от этого самого скролла - codepen (будьте осторожны, проверено только в последних версиях хрома и ff). Понятно, что идея сырая, но если ее доработать, то можно будет запилить что-то похожее на вашу картинку.

На постоянной основе - anime.js или делаю анимации на CSS, иногда использую D3.js.

Хочется анимировать свой макет, показав дизайнерские решения. Что можете сказать?

(говорю с позиции человека, который потом все эти "решения" воплощает в жизнь): если вы будете что-то делать в After Effects, то должны будете сразу заказчику/начальнику сказать, что в реальной верстке это будет немного отличаться от нарисованного. А то потом начинается... Поскольку даже простые на первый взгляд штуки вроде этой или вот этой очень геморройно делать именно так, как их нарисовали. Так что для верстальщика может быть более чем достаточно покадровой схемы, нарисованной на бумаге с проставлеными размерами элементов. Насколько я видел, дизайнеры все равно с нее начинают.