Аватор создаёт ретро-текст в браузере, но метод слишком медленный

Раньше автор часто видел ретро-эффект текста с двойными контурами и пытался воссоздать его через CSS-свойство text-stroke. Поскольку это значение принимает только один параметр, наложения элементов с помощью stacking не работали как надо. Однажды в конце прошлого года, глядя на похожий эффект в книге Graphic Japan, он решил попробовать ещё раз. Поэкспериментировав с наложением нескольких уровней, автор случайно изменял толщину stroke для каждого слоя. К его удивлению, результат наконец-то начал получаться. Суть метода в том, что браузеры автоматически рисуют обводку для символов при разных значениях ширины stroke. Чем больше ширина, тем толще контур, но при этом сохраняется исходная форма буквы. Следующий шаг — использование разных цветов и их последовательная расстановка. Firefox обеспечивает более плавную отрисовку по сравнению с Chrome и Safari. Когда несколько текста выстраивается в одну линию, формы символов начинают сливаться. Итоговый результат сильно зависит от выбранного шрифта. Для ускорения экспериментов с разными типами автор добавил функцию загрузки @google-font. Пробовались разные варианты: от Matemasie до Pacifico, Tangerine и Cherry Bomb One. Однако производительность этого метода столь же плоха, как у CSS-фильтров, особенно когда размер шрифта становится большим, что иногда вызывает мерцание. Это уместно для экспериментов или генерации изображений через css-doodle, но плохо подходит для продакшн-задач. В статье приведены примеры кода и ссылки на CodePen для дальнейшего изучения.