How to add animated gradient to an svg path?

Question

I have a heart svg path like so:

Answer 1

You can use the SMIL animation of SVG. The idea is to animate the color-stop or the offset of the gradient to create the needed effect:

svg {
 border:1px solid;
 width:200px;
}

Animating the color:

svg {
 border:1px solid;
 width:200px;
}

---

Another idea is to consider the path inside a mask then you run a CSS animation to easily animate the background properties:

svg {
  border: 1px solid;
  width: 200px;
}

.box {
  width:200px;
  height:200px;
  background:linear-gradient(to right,red,green,blue) left/200% 100%;
  -webkit-mask:url('data:image/svg+xml;utf8,') center/contain;
          mask:url('data:image/svg+xml;utf8,') center/contain;
          
   animation:change 2s infinite linear alternate;
}
@keyframes change {
  to {
    background-position:right;
  }
}

Related question to get more detail about background calculation: Using percentage values with background-position on a linear-gradient