Применить анимацию на svg, через js
const vvv = new Vivus('vvv', {
type:'delayed',
duration:200,
});<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vivus.min.js"></script>
<svg viewBox="0 0 36 36" version="1.1" id='vvv' style='width: 100px'>
<g style="stroke: red; stroke-width: 1px;">
<path d="m 19,11.29 c 2.89,0.86 5,3.54 5,6.71 0,3.17 -2.11,5.85 -5,6.71 v 2.06 c 4.01,-0.91 7,-4.49 7,-8.77 0,-4.28 -2.99,-7.86 -7,-8.77 z"id="path3" />
<path d="m 19,14 v 8 c 1.48,-0.68 2.5,-2.23 2.5,-4 0,-1.74 -1.02,-3.26 -2.5,-4 z" id="path2" />
<path d="m 8,21 h 4 l 5,5 V 10 l -5,5 H 8 Z" id="path1" />
</g>
</svg>Хочу научиться делать такие же анимации как на ютуб иконке. Что то подсказывает, куда то не в ту сторону свернул. В моем примере, анимация применяется только на свойство stroke и иконка разбита на 3 тега 'path'. На ютубе, один тег и меняется только содержимое атрибута 'd='
Как такую же анимацию реализовать, мол и така и при выключении звука другая анимация...