У меня есть path
слова stack
, которые я получил с помощью векторного редактора.
Я заполнил символы с помощью двухцветного градиента
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="200" viewBox="0 0 600 200">
<defs>
<linearGradient id="Lg" x1="%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="dodgerblue" />
<stop offset="100%" stop-color="white" />
</linearGradient>
</defs>
<g fill="url(#Lg)" stroke="skyblue" >
<path d="m96.5 75.6 8 25.1q-6.5-5.6-11.7-8.6-5.2-3-8.5-3-2.5 0-3.9 1.4-1.4 1.3-1.4 3.7 0 3 3 5.3 3 2.3 9.3 4.3 14 4.3 18.9 8.3 5 4 5 10.4 0 10.2-10.1 16.8-10 6.6-25.8 6.6-8 0-16-2.9-8-3-14.7-8.3v11.3L40.2 120.9q5.8 4.7 11.4 7.3 5.7 2.5 10.3 2.5 5 0 7.7-2.1 2.8-2.1 2.8-5.9 0-3.5-2.2-5.6-2.2-2.1-9.9-4.5-11.2-3.6-16.7-8.4-5.5-4.9-5.5-11.5 0-8.3 7.3-13.6 7.3-5.3 19-5.3 7.7 0 15.1 2.8 7.4 2.8 15.1 8.6zM192.6 74l-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4"/>
<path d="m192.6 74-22.7 44.4-3-33.9-13.1 51.9 19.9 9.5-42.9-2.3 13.8-4.3-15.7-55.8-4.5 41-9.2-45.4z"/>
<path d="m234.8 106.9-6.5-18.7-6.3 23.1zm37.8 26.9-40.9 12.7 10.5-14-3-10.4-15.2 1.2-4.4 12.1 6.6 5.2-44.4 3.2 10.8-8.1 14.4-56-8.2-5.3 55.1 1.8-12.8 4.6 22.5 50.3z"/>
<path d="m341 109.9-5 32.5-1.9-13.3q-6.8 8.1-15 12.3-8.2 4.2-17.1 4.2-5.9 0-11.4-2.4-5.5-2.4-10-7-5.3-5.3-8.2-12-2.8-6.7-2.8-13.6 0-9.6 4.1-17.5 4.1-8 11.6-13 5-3.3 10.8-5 5.8-1.6 12.6-1.6 6.1 0 11.4 1.9 5.3 1.9 9.9 5.9l2.7-7.8 4.8 25.6q-3.1-4.5-7.3-6.8-4.2-2.3-9.1-2.3-5.6 0-9 3.3-3.4 3.3-3.4 8.7 0 5.7 4.3 9.6 4.3 3.8 10.7 3.8 3.9 0 8.2-1.4 4.3-1.4 9.2-4.2z"/>
<path d="m430.7 145.1-37.3-4.5 7.5-4.9-21.7-22.4-2.4 0.5 5.1 24.9 7.9 8.4-47.2-5.3 8.4-6.2 4.5-51-9.1-5.9 37.7-4.6-10.5 8.2 3.1 19.9 16.5-19.7-4.6-5.7 34.4 1.3-24.4 19.6z"/>
</g>
</svg>
Как сделать анимацию переливания одного цвета в другой?