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 ------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
