Jump to content


Tween svg fill to gradient then back to single color

Moderator Tag

Recommended Posts

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');

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

      if(rgb2hex(fillcolor) == color_array[i]) {
          if (i < color_array.length-1)
            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]});


Link to comment
Share on other sites



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);


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



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.



  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.