Как реализовать появления текста вслед за движением объекта?

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


<?xml version="1.0" encoding="UTF-8"?> Red Hot Chilli Peppers Logo text { font-size: 16px font-family: helvetica font-weight: 900 text-transform: uppercase letter-spacing: 17px } Red Hot Chilli Peppers

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

Ответ
Короткий ответ
Эффект появления надписи достигается с помощью трех слоев:
Статичный текст, который расположен вдоль path полуокружности Сверху для маскирования текста, расположен патч со цветом фона Анимированная маска, которая стирает маскирующий патч Плюс цветная окружность, которая движется вместе с маской


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

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

Маска имеет ту же форму path, что и маскирующий path, атрибут маски stroke="white" делает прозрачным маскирующий path. Анимационный эффект движения маски достигается изменением атрибута 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% }