@AveConstantis

Как анимировать svg?

Как можно анимировать данную svg, возможно есть какие-то плагины на js? Возможно можно как-то на css?

Свг должна появляется как змейка.
И хотелось бы это все кроссбраузерно и для IE.

SVG иконка
  • Вопрос задан
  • 265 просмотров
Пригласить эксперта
Ответы на вопрос 2
PhoenixX33i
@PhoenixX33i
Думаю, ЭТО должно Вам помочь.
Всего доброго :)
Ответ написан
LenovoId
@LenovoId
I want, women not to get sick
Скопируйте и запустите - отпишитесь

<svg width="374" height="146" viewBox="0 0 374 146" fill="none" xmlns="http://www.w3.org/2000/svg">
  
<defs>
<linearGradient id="paint0_linear" x1="3.92979" y1="71" x2="366.07" y2="71" gradientUnits="userSpaceOnUse">
<stop stop-color="#E58ED3"/>
<stop offset="0.17" stop-color="#DE8CD5"/>
<stop offset="0.41" stop-color="#CC86DC"/>
<stop offset="0.69" stop-color="#AE7CE6"/>
<stop offset="1" stop-color="#856EF5"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="365.998" y1="4" x2="374.002" y2="4" gradientUnits="userSpaceOnUse">
<stop stop-color="#E58ED3"/>
<stop offset="0.17" stop-color="#DE8CD5"/>
<stop offset="0.41" stop-color="#CC86DC"/>
<stop offset="0.69" stop-color="#AE7CE6"/>
<stop offset="1" stop-color="#856EF5"/>
</linearGradient>
<mask id="mask1">
  <rect width="100%" height="100%" fill="#000"/>
  <path d="M4 138V20C4 11.1634 11.1634 4 20 4H366" stroke="#fff" stroke-dasharray="4 4"/>
  <path d="M374 4L366 0V8L374 4Z" fill="#fff"/>
</mask>
<mask id="mask2">
  <rect width="100%" height="100%" fill="#000"/>
  <path d="M374 4L366 0V8L374 4Z" fill="#fff"/>
</mask>
</defs>
  

  
<rect width="0" height="100%" fill="url(#paint0_linear)" mask="url(#mask1)">
  <animate id="an1" attributeName="width"
                    dur="3s"
                    begin="0s"
                    values="0%; 40%; 30%; 50%;30%; 80%; 100%"
                    fill="freeze"/>
</rect>
<rect width="0%" height="100%" fill="url(#paint1_linear)" mask="url(#mask2)">
  <animate  attributeName="width"
                    dur="3s"
                    begin="an1.end"
                    values="0%;  100%"
                    fill="freeze"/>
</rect>

</svg>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы