CODEWITHSUNDEEP
csssvgcss-animations
Ivan Topić
Ivan Topić

Reputation: 3185

Is it possible to animate stroke gradient?

Is it possible to animate gradient for rectangular/circle/closed paths? This example only hard switches between two gradients

Codepen

SVG - circle and path with two defined gradients

<svg width="900" height="500" viewBox="0 0 300 300">
  <defs>

    <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#00bc9b" />
      <stop offset="100%" stop-color="#5eaefd" />
    </linearGradient>
    <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#333" />
      <stop offset="100%" stop-color="#fff" />
    </linearGradient>

  </defs>

  <path transform="translate(-200,-200)" d="M 100 300 Q 150 50 200 250 Q 250 550 350 350 Q 350 50 400 250 C 450 550 450 50 500 300 C 550 50 550 550 600 300 A 50 50 0 1 1 100 300 " />
  <circle cx="200" cy="200" r="200" />

</svg>

CSS

circle, path {
  stroke: red;
  stroke-width: 20px;
  fill: transparent;
  animation-name: stroke;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}


@keyframes stroke {
  from {
    stroke: url(#gradient1);
  }
  to {
    stroke: url(#gradient2);
  }
}

Upvotes: 1

Views: 1816

Answers (1)

enxaneta
enxaneta

Reputation: 33024

You can use SMIL animations although SMIL animations are not supported in IE & Edge.

svg{width:90vh}
rect {
  stroke: url(#gradient1);
  }
<svg viewBox="0 0 500 300">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#00bc9b">
        <animate attributeName="stop-color" attributeType="CSS" values="#00bc9b;#333;#00bc9b;" dur="5s" repeatCount="indefinite"></animate>
      </stop>
      <stop offset="100%" stop-color="#5eaefd">
        <animate attributeName="stop-color" attributeType="CSS" values="#5eaefd;#f00;#5eaefd;" dur="5s" repeatCount="indefinite"></animate>
      </stop>
    </linearGradient>
   
  </defs>
  <rect width="400" height="200" x="10" y="20" 
        stroke-width="20" 
        fill="transparent"
        > 
  </rect>
</svg>

Upvotes: 3

Related Questions