Animation of fill colour

[Noufal Ibrahim]

Hi everyone,

  I have a Polygon `p` object which I want to animate. If I use a use something like.

  function animate() {
  p.attr({
      transform: "t0 0"
    })
    .animate({
      transform: "t-894 0"
    }, 2000, animate);
};
animate();

 it works fine. The translation makes the polygon scroll from right to left. I got this code from https://codepen.io/chriscoyier/pen/BvoiG

  In my own code though, I want to animate not the position but the colours. Gradually change the shade and then back again. An approach like this works in RaphaelJs

        p.animate({fill: "#00d600"}, 1000, Raphael.linear, ()=>p.animate({fill: "#7ed666"}, 1000, Raphael.linear))

 But if I change the the parameters to animate to something like

function animate() {

  p.attr({
                fill: "#00d600"
    })
    .animate({
                fill: "#7ed666"
    }, 2000, animate);
};

then, I get an error like so

Uncaught DOMException: Document.querySelector: 'rgb(0, 214, 0)'

is not a valid selector

This occurs only with Snap. Similar code with Raphael works just fine. I'm not very comfortable with Javascript or with SVG so I'd appreciate any advice.

Thanks much!