Loading ...
Sorry, an error occurred while loading the content.

Re: animating gradients

Expand Messages
  • israel_eisenberg
    Hi guys, I know this thread is ancient history but as I m off the Web lately for very long periods of time, I just recently discovered it, so if I may mumble a
    Message 1 of 16 , Oct 10, 2010
    • 0 Attachment
      Hi guys,

      I know this thread is ancient history but as I'm off the Web lately for very long periods of time,
      I just recently discovered it, so if I may mumble a bit...

      Linear.
      Jake, first let me join the congratulations for your elegant solution, cheers!

      Judging from your last post on the linear, I still cannot tell if you got what you wanted.
      just In case, I set the following demo:

      http://owl3d.com/tests/svg-developers/scrolling-colors/Jake_linear_3(pure_rainbow).svg

      Chaals advice was good but only partly - push a copy of the first stop to be the last
      and use "repeat", but instead of messing with offsets > 1, just set the offsets to be
      equally spaced to 1, that's it.

      Radial.
      Jake and Thomas, one drawback of using r>.5 in this case (circle with bbox units)
      is that some of the colors are always missing.

      Following demo simulate what is happening beyond the edge of the circle.
      White circle marks the edge of the original circle (0.8333 offset), black marks
      the 1.0 offset and the large circle edge is the 1.2 offset:

      http://owl3d.com/tests/svg-developers/scrolling-colors/Thomas_2.svg

      (Code adjusted to support ASV also).
      As can be clearly seen, all colors currently between the white and black circles,
      are missing from the original circle.

      Second drawback is that the innermost ring is not really moving but instead, "stretching".
      From the instance the center stop-color is set (periodically), it is fixed, thus the center
      gradient-ring is only stretching to its final offset-gap size, and only then, start to really move.
      Same is happening also with the outer ring (shrinking instead of stretching) but is clipped.

      To avoid those two drawbacks In the following demo, I set two fixed-offset boundary stops
      at 0 and 1 offsets. Rest of the stops are exactly like in your code - fixed color and offset
      change continuously:

      http://owl3d.com/tests/svg-developers/scrolling-colors/rad_grad5(basic).svg

      The color of the two boundary stops is the same on both and continuously changing,
      calculated by interpolating between the first and last inner-stops colors (inner-stops are
      the non-boundary stops), based on the distance of the first inner-stop from the center.

      The result is that at any given instance, the combined edge and center gradient-rings
      complement each other to form a full offset-gap gradient, thus mimic the movement
      of that gradient from the edge to the center.


      Chaals, I think your code is very nice and could present a skeleton for a SMIL solution
      had you only adopt your own advice to Jake - push a copy of first stop to be the last :)

      As for your request
      >>>...adjust it to make everything seem beautiful...

      as your code actually works (with an extra stop) I guess by "beautiful" you mean
      finer granularity, which is the goal of the following demo based on your suggestion:

      http://owl3d.com/tests/svg-developers/scrolling-colors/Charles_4(1_grain).svg

      My personal take on the SMIL is much like Chaals suggestion, but instead of manipulating
      color-values while keeping a single begin-time, I keep a single colors-vector (thus, simple)
      and manipulate the begin-times:

      http://owl3d.com/tests/svg-developers/scrolling-colors/rad_grad6(begin_offset).svg

      Seems to me like the last two demos are ok as proof-of-concept, but not really practical.
      I would love to see a SMIL solution which does not involve so many tags
      (hopefully no one think I actually hard-code those tags :) )

      Cannot do without playing, I hope you like these two:

      SMILless:
      http://owl3d.com/tests/svg-developers/scrolling-colors/rad_grad6(infi).svg

      And a pronounced optical illusion every time animation is paused (or maybe it's just me?):
      http://owl3d.com/tests/svg-developers/scrolling-colors/Jake_linear_3(play1).svg


      In all the demos, you can click anywhere to toggle the animation.

      Thanks for your time

      Israel
    Your message has been successfully submitted and would be delivered to recipients shortly.