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

#html #css #html5 #svg #анимация

оригинал вопроса : https://toster.ru/q/525769

Как всегда вопрос заинтересовал меня своей необычностью, приложу макет 


Начал с SVG и получилось это :









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

Ответы

Ответ 1

Короткий ответ

Эффект  появления надписи достигается с помощью трех слоев:


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




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%;
 }