Как сделать анимацию на SVG таким образом?

оригинал вопроса : https://toster.ru/q/525769
Как всегда вопрос заинтересовал меня своей необычностью, приложу макет
Начал с SVG и получилось это :

Как добиться эффекта постепенного появления текста, изображенного на картинках в начале вопроса ?

Ответ

Короткий ответ
Эффект появления надписи достигается с помощью трех слоев:
Статичный текст, который расположен вдоль патча полуокружности Сверху для маскирования текста, расположен патч со цветом фона Анимированная маска, которая стирает маскирующий патч Плюс цветная окружность, которая движется вместе с маской
text { font-size: 18px; font-family: serif; font-weight: 900; text-transform: uppercase; fill:#535353; } .container { width:50%; height:50%; }

Подробно
Текст расположен вдоль патча полуокружности
S o l u t i o n s & c o n s u l t
Для кроссбраузерного решения пришлось искать варианты, чтобы заполнение и расстояние между буквами было одинаково: textLength="100%" letter-spacing="4.8"
Сверху для маскирования текста, расположен патч со цветом фона

Патч имеет форму дуги в полкружности и его ширина stroke-width="30" полностью перекрывает текст Анимированная маска, которая стирает маскирующий патч

Маска имеет ту же форму пути, что и маскирующий патч, атрибут маски stroke="white" делает прозрачным маскирующий патч. Анимационный эффект движения маски достигается изменением атрибута stroke-dashoffset
Цветная окружность, которая движется вместе с маской
Движется по тому же пути, что и маска. Эффект размытия тени - фильтр Гаусса

Анимация увеличения, уменьшения размытия окружности достигается изменением атрибута stdDeviation
Пример работает во всех современных браузерах, кроме IE, который по определению не умеет работать с анимацией. Пример адаптивен Можно создавать подобные приложения для своих проектов, меняя только текст и картинку.
DEMO LIVE
Пример с другой картинкой
Изменен текст и понадобилось подогнать размеры картинки и её позиционирование

text { font-size: 18px; font-family: serif; font-weight: 900; text-transform: uppercase; fill:black; } .container { width:50%; height:50%; }