Максим

видео много - выбирайте

https://jsfiddle.net/9zwr067u/7/
https://jsfiddle.net/xgu10o25/11/

это можно на svg/png сделать самую нижнюю часть и перекрывать абсолютом саму картинку .. и всё

https://codepen.io/topicstarter/pen/rKXEyr

https://jsfiddle.net/f7cjz04x/3/ не знаю вариант или нет - но ...

ffmpeg - отличный вариант - fag читайте в сети - я так делал

https://jsfiddle.net/2hkjd3bm/15/ но пользуйтесь лучше flex
https://jsfiddle.net/2hkjd3bm/19/ вот на flex

а обычного parent:relative а child:absolute не канает ?

а просто toggleClass использовать нельзя ?

это и есть правильно - создаём чистый текстовый документ - помещаем этот код - переименовываем в название.svg и подключаем ....можно использовать преобразовав в base64 как url background ...так же можно подключать в html как simbol или как img или background или use

больше информации : svg-art.ru - автор этого сайта есть на ru.stackoverflow.com

Перевёл шрифт в кривые Безье и текст градиентом стал отображаться отлично, в поиске решения помог Moskus,

animation-play-state: paused;