Tween svg fill to gradient then back to single color

[tomKnox 4 Likes (Newbie)]

Hi! best wishes for ya'll green(s)®ockers! Good health & what floats your boat! enjoy!!

my question: Is it possible to define a gradient of lets say 4 color stops in jquery
then loop through an array of colors and one of those array items is that gradient... the rest is a single color.

Here is what I have. (it might look dirty... just testing )
The rainbow_array in the color array obviously doesn't work, its just to illustrate what i am after.
Many thanks for some insight!
 

var rainbow_array = Array ("e21111", "11e2c2", "a011e2");
var color_array = Array("#ffcc00",rainbow_array, "#e7353a", "#b62727", "#eeeeee", "#d5d5d5", "#0c0c0c");

$('#clickable_thing').click(function(event) {


      var parent = $(this).parent();
      parent = parent.find("rect");

      var fillcolor = $(parent).css('fill');
      console.log(rgb2hex(fillcolor));

      TweenMax.to(parent,.4,{fill: color_array[i]});

      if(rgb2hex(fillcolor) == color_array[i]) {
          if (i < color_array.length-1)
          {
            i++;
            if (i == 1) {
                /*do gradient*/

            } else {
               TweenMax.to(parent,.4,{fill: color_array[i]});
           }
       } else {
        i = 0;
        TweenMax.to(parent,.4,{fill: color_array[i]});
    }
}
});

 

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

One possibility is use the colorProps Plugin to tween the color value of a dummy object and onUpdate pass those values to a SVG object using RaphaelJS attr method, like this:

var btn1 = $("#btn1"),
      btn2 = $("#btn2"),
    
      //tween the properties of this object to apply the colors to the SVG object
      colorObj = {a:'#f00',b:'#f00'},
      t = TweenLite.to(colorObj, 2,{ colorProps:{a:'#f0f', b:'#00f'}, onUpdate:upFn, paused:true }),
    
      //raphael elements
      paper = Raphael(10,150,200,100),
      rectangle = paper.rect(0,0,200,100);

rectangle.attr("fill",'45-rgb(255,0,0)-rgb(255,0,0)-rgb(255,0,0)');

function upFn()
{
	console.log(colorObj.a);
	rectangle.attr("fill",'45-rgb(255,0,0)-' + colorObj.a + '-' + colorObj.;
}

btn1.click(function()
{
	t.play();
});

btn2.click(function()
{
	t.reverse();
});

You can see it here:

See the Pen uJdsh by rhernando (@rhernando) on CodePen

 

I did it this way because I have the impression that the engine's RaphaelJS plugin doesn't pass gradients, just solid fills.

 

Please feel free to fork and adapt it to your needs.

 

Rodrigo.

[tomKnox 4 Likes (Newbie)]

Pardon me for the late reply, thank you for this example, it worked out well.
Kinda got lost in new projects so heres my belated thanks!