Как сделать анимацию чёрных силуэтов

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

Необходимо сделать анимацию пары черных силуэтов. 

Код svg: 









Анимация уменьшения, увеличения прозрачности не подходит.
    

Ответы

Ответ 1

Вариант анимации силуэтов с добавлением анимации градиентов фона



.play-audio {

position:absolute;
top:0%;
right:0%;
}
  
	
		




  




Live Demo


Ответ 2

Основная идея - сделать прорисовку контуров с помощью изменения атрибута патча stroke-dashoffset
с последующим изменением цвета заполнения фигур. 

Силуэты черные, потому что не указан параметр fill у патча, который по умолчанию
имеет чёрный цвет. Чтобы убрать дефолтную заливку назначаем fill="none" 


Файл svg имеет большой размер. Оптимизируем его с помощью
Svg-editor   
Для анимации контуров фигур необходимо узнать их длину

`   



Полученное значение длины линии - 8263px   


Формула анимации прорисовки линий силуэтов:



Код анимации заливки цветом




Она начнется через 20 секунд, после начала анимации прорисовки линий  
Добавлено музыкальное сопровождение


Ниже полный код: 
Смотреть лучше в полноэкранном режиме