display: inline с однотонным фоном наложить градиент по маске
Для отступов на каждой строке используется box-decoration-break, поддержка которого слабая, но это уже другая задача. Основная часть состоит в mix-blend-mode.
В случае с белым фоном и текстом подходит mix-blend-mode: overlay с серым градиентом. С другими фонами придется поэкспериментировать, или их тоже сделать градиентом
SVG-фильтром захреначил как-то так:
Но это чисто из интереса. На бою стоит юзать вариант Ankhena, с добавкой js, если потребуется.
А вообще, по хорошему, стоило бы дизайнера отп*дить.
Не просто можно, а нужно - тем более, если в дальнейшем планируется посадка на cms: как то трудно представляются себе страницы с одинаковым поведением но живущие при этом каждая своей жизнью, со своими классами, ид и тд... если вы еще не работаете с html-шаблонизаторами, попробуйте, потом не сможете без них... я сам не так давно опробовал pug, сейчас уже не понимаю, как раньше обходился без него... вообще как бы сейчас шаблонизаторы здорово облегчают жизнь верстальщика.
Даёте уникальные id для каждого пути и кнопки, потом вешаете на пути общий класс для анимации. А дальше написал простую функцию для анимации последовательности маршрута: dash('#path1', '#path2');