Re: [svg-developers] animating gradients
Hi David, Thanks for the reply. The demos you linked to were interesting and instructive. In the end, it seems I was able to find a fairly elegant way of accomplishing this task using SMIL (tested in Chromium): http://live.echo-flow.com/svg/scrolling-colors.svg The solution basically hinges on the gradient's spreadMethod=reflect attribute, and using animateTransform to continually translate the gradient vector. As I said, I think this is rather elegant, but if anyone can think of a better approach, I'd be very interested to know. Thanks, Jake On Mon, Sep 20, 2010 at 6:40 PM, ddailey ddai...@zoominternet.net wrote: Hi Jake, I've played some with what I think is the same thing you've been trying to do and haven't been completely satisfied with my results. Take a look at the first cluster of links at http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/edges_of_plausibility.htm In those I do something with animating the position of gradients within a stop. Two older examples using script and dating from before Chaals McCathie Neville had emerged from his pouch, can be seen here: http://srufaculty.sru.edu/david.dailey/svg/waves.html http://srufaculty.sru.edu/david.dailey/svg/eggcloning3.svg. They ripple gradients out from a center point deflecting content on top via feDisplacement which I think is only implemented in IE/ASV and Opera so far. (Though Chrome shows hints of starting to play with feDisplacement which is a good thing!) The problem I seem to recall having was in getting the transitions between waves to match up, one of several boundary problems that I've bumped into from time to time. Hope this might help, and I'll be interested in whatever solutions you find. cheers David - Original Message - From: Jacob Beard To: svg-developers Sent: Monday, September 20, 2010 4:15 PM Subject: [svg-developers] animating gradients Hi, I'm just starting to learn about SVG SMIL animation, and I'm attempting to perform a simple task involving linear gradients. What I'd like to do is have a simple linear gradient with a set of stops, and then animate the stops so that the colours cycle through the fill. What I mean by this is, given something like the following gradient linearGradient id=MyGradient stop offset=.10 stop-color=red/ stop offset=.30 stop-color=green / stop offset=.50 stop-color=yellow / stop offset=.70 stop-color=blue / stop offset=.90 stop-color=blue/ /linearGradient The first stop should go from offset .1 to 1, then 0 to .1, and repeat. The second stop offset should go from .3 to 1, then 0 to .3, and so on. It's easy enough for me to imagine how to represent this in script, as each stop is simply being animated the same way at each time step, starting from a different offset, but it's not clear to me how you can accomplish the same thing using SMIL. If anyone has any insight into this, I'd appreciate it if you could let me know. Thanks, Jake [Non-text portions of this message have been removed] - 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/
Re: [svg-developers] animating gradients
On Tue, 21 Sep 2010 08:41:52 -0700, Jacob Beard jbea...@cs.mcgill.ca wrote: In the end, it seems I was able to find a fairly elegant way of accomplishing this task using SMIL (tested in Chromium): http://live.echo-flow.com/svg/scrolling-colors.svg Works nicely in Opera too. The solution basically hinges on the gradient's spreadMethod=reflect attribute, and using animateTransform to continually translate the gradient vector. I agree that this is pretty elegant. I made an alternative version using spreadMethod-repeat, adding a red gradient stop at 1.1 (to get a smooth transition from violet back to red), and setting the transform to animate from 0 to 1.1 - this means the colours just slide across from left to right smoothly - since that was what I had thought you were aiming at originally. I think this actually violates the SVG spec which says that stops are forced to take values in the range [0,1] if they fall outside it - http://www.w3.org/TR/SVG/pservers.html as I read it. So I'm intrigued about what it does in other browsers, and whether it is worth filing a change request... cheers Chaals -- Charles McCathieNevile Opera Software, Standards Group je parle français -- hablo español -- jeg lærer norsk http://my.opera.com/chaals Try Opera: http://www.opera.com - 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/
Re: [svg-developers] animating gradients
Hi Charles, I tried what you suggested, and it seems to give me a hard edge between the violet and red regions. I'm not sure why it does this though, as it seems to me that it should transition smoothly from violet to red. To resolve this, I tried changing the x2 attribute to 1.1, but that did not seem to have an effect. Perhaps you could post your code. I'm now trying to achieve a similar effect with radial gradients. Unfortunately, I haven't been able to think of a way to do this using SMIL, as I can't seem to find a way to express the notion of moving a gradient stop to the center of the radial gradient, so I've tried to implement it with script. Here's what I have so far: http://live.echo-flow.com/svg/scrolling-radial-colors.svg Visually, this is not too bad. One thing I would like to improve, though, is to find a way that is less visually jarring to add a gradient stop to the center. Even when offset=0, the new stop just kind of pops in. I think it would be better to have more of a zooming effect, where the new color appears as just a pinpoint and then gradually expands. Based on this, I think a solution may be found using scale transformations in conjunction with adjusting the offset and moving the stop in DOM, but I'm not sure. If anyone has any suggestions as to how to improve this using script, or even how to achieve this effect using SMIL, I'd greatly appreciate it if you could let me know. Thanks, Jake On Tue, Sep 21, 2010 at 12:13 PM, Charles McCathieNevile cha...@opera.com wrote: On Tue, 21 Sep 2010 08:41:52 -0700, Jacob Beard jbea...@cs.mcgill.ca wrote: In the end, it seems I was able to find a fairly elegant way of accomplishing this task using SMIL (tested in Chromium): http://live.echo-flow.com/svg/scrolling-colors.svg Works nicely in Opera too. The solution basically hinges on the gradient's spreadMethod=reflect attribute, and using animateTransform to continually translate the gradient vector. I agree that this is pretty elegant. I made an alternative version using spreadMethod-repeat, adding a red gradient stop at 1.1 (to get a smooth transition from violet back to red), and setting the transform to animate from 0 to 1.1 - this means the colours just slide across from left to right smoothly - since that was what I had thought you were aiming at originally. I think this actually violates the SVG spec which says that stops are forced to take values in the range [0,1] if they fall outside it - http://www.w3.org/TR/SVG/pservers.html as I read it. So I'm intrigued about what it does in other browsers, and whether it is worth filing a change request... cheers Chaals -- Charles McCathieNevile Opera Software, Standards Group je parle français -- hablo español -- jeg lærer norsk http://my.opera.com/chaals Try Opera: http://www.opera.com - 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/
Re: [svg-developers] animating gradients
Very cool! Reflected and repeated gradients are quite powerful and yet I often forget about them. Animating a reflected gradient can be sorta fun: http://srufaculty.sru.edu/david.dailey/svg/newstuff/gradient11b.svg This example now works well in IE/ASV, FF4 and Chrome. Opera's version has been a bit wrong to my way of thinking for some years now (the antialiasing doesn't look right) and Safari is just beginning to handle the animation but doesn't seem to understand the reflected gradient. regards David - Original Message - From: Jacob Beard jbea...@cs.mcgill.ca To: svg-developers@yahoogroups.com Sent: Tuesday, September 21, 2010 11:41 AM Subject: Re: [svg-developers] animating gradients Hi David, Thanks for the reply. The demos you linked to were interesting and instructive. In the end, it seems I was able to find a fairly elegant way of accomplishing this task using SMIL (tested in Chromium): http://live.echo-flow.com/svg/scrolling-colors.svg The solution basically hinges on the gradient's spreadMethod=reflect attribute, and using animateTransform to continually translate the gradient vector. As I said, I think this is rather elegant, but if anyone can think of a better approach, I'd be very interested to know. Thanks, Jake On Mon, Sep 20, 2010 at 6:40 PM, ddailey ddai...@zoominternet.net wrote: Hi Jake, I've played some with what I think is the same thing you've been trying to do and haven't been completely satisfied with my results. Take a look at the first cluster of links at http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/edges_of_plausibility.htm In those I do something with animating the position of gradients within a stop. Two older examples using script and dating from before Chaals McCathie Neville had emerged from his pouch, can be seen here: http://srufaculty.sru.edu/david.dailey/svg/waves.html http://srufaculty.sru.edu/david.dailey/svg/eggcloning3.svg. They ripple gradients out from a center point deflecting content on top via feDisplacement which I think is only implemented in IE/ASV and Opera so far. (Though Chrome shows hints of starting to play with feDisplacement which is a good thing!) The problem I seem to recall having was in getting the transitions between waves to match up, one of several boundary problems that I've bumped into from time to time. Hope this might help, and I'll be interested in whatever solutions you find. cheers David - Original Message - From: Jacob Beard To: svg-developers Sent: Monday, September 20, 2010 4:15 PM Subject: [svg-developers] animating gradients Hi, I'm just starting to learn about SVG SMIL animation, and I'm attempting to perform a simple task involving linear gradients. What I'd like to do is have a simple linear gradient with a set of stops, and then animate the stops so that the colours cycle through the fill. What I mean by this is, given something like the following gradient linearGradient id=MyGradient stop offset=.10 stop-color=red/ stop offset=.30 stop-color=green / stop offset=.50 stop-color=yellow / stop offset=.70 stop-color=blue / stop offset=.90 stop-color=blue/ /linearGradient The first stop should go from offset .1 to 1, then 0 to .1, and repeat. The second stop offset should go from .3 to 1, then 0 to .3, and so on. It's easy enough for me to imagine how to represent this in script, as each stop is simply being animated the same way at each time step, starting from a different offset, but it's not clear to me how you can accomplish the same thing using SMIL. If anyone has any insight into this, I'd appreciate it if you could let me know. Thanks, Jake [Non-text portions of this message have been removed] - 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 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/
Re: [svg-developers] animating gradients
On Tue, 21 Sep 2010 10:49:01 -0700, Jacob Beard jbea...@cs.mcgill.ca wrote: Hi Charles, I tried what you suggested, and it seems to give me a hard edge between the violet and red regions. I'm not sure why it does this though, as it seems to me that it should transition smoothly from violet to red. My guess is that your browser is following the spec and forcing your 1.1 offset back to 1... (I use Opera, which doesn't seem to do that. I like it that way, whatever the spec says, so I guess I'll ask if there is a good reason not to change the spec...) To resolve this, I tried changing the x2 attribute to 1.1, but that did not seem to have an effect. Perhaps you could post your code. No, because I just did it live and then trashed it again :( I could regenerate it if you like. Maybe you could have a gradient that goes 0 red .15 orange .3 yellow .45 green .6 blue .7 indigo .8 violet 1 red and then do a transform=scale(1.25) to have it finish on the violet. (I confess I am thinking out loud in a moment - if I get a quarter hour later I will try it in code...) cheers I'm now trying to achieve a similar effect with radial gradients. Unfortunately, I haven't been able to think of a way to do this using SMIL, as I can't seem to find a way to express the notion of moving a gradient stop to the center of the radial gradient [...] I'm working offline now so can't check. But what about animating the colours in each stop? It's not so elegant, but... -- Charles McCathieNevile Opera Software, Standards Group je parle français -- hablo español -- jeg lærer norsk http://my.opera.com/chaals Try Opera: http://www.opera.com - 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/
[svg-developers] animating gradients
Hi, I'm just starting to learn about SVG SMIL animation, and I'm attempting to perform a simple task involving linear gradients. What I'd like to do is have a simple linear gradient with a set of stops, and then animate the stops so that the colours cycle through the fill. What I mean by this is, given something like the following gradient linearGradient id=MyGradient stop offset=.10 stop-color=red/ stop offset=.30 stop-color=green / stop offset=.50 stop-color=yellow / stop offset=.70 stop-color=blue / stop offset=.90 stop-color=blue/ /linearGradient The first stop should go from offset .1 to 1, then 0 to .1, and repeat. The second stop offset should go from .3 to 1, then 0 to .3, and so on. It's easy enough for me to imagine how to represent this in script, as each stop is simply being animated the same way at each time step, starting from a different offset, but it's not clear to me how you can accomplish the same thing using SMIL. If anyone has any insight into this, I'd appreciate it if you could let me know. Thanks, Jake - 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/
Re: [svg-developers] animating gradients
Hi Jake, I've played some with what I think is the same thing you've been trying to do and haven't been completely satisfied with my results. Take a look at the first cluster of links at http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/edges_of_plausibility.htm In those I do something with animating the position of gradients within a stop. Two older examples using script and dating from before Chaals McCathie Neville had emerged from his pouch, can be seen here: http://srufaculty.sru.edu/david.dailey/svg/waves.html http://srufaculty.sru.edu/david.dailey/svg/eggcloning3.svg. They ripple gradients out from a center point deflecting content on top via feDisplacement which I think is only implemented in IE/ASV and Opera so far. (Though Chrome shows hints of starting to play with feDisplacement which is a good thing!) The problem I seem to recall having was in getting the transitions between waves to match up, one of several boundary problems that I've bumped into from time to time. Hope this might help, and I'll be interested in whatever solutions you find. cheers David - Original Message - From: Jacob Beard To: svg-developers Sent: Monday, September 20, 2010 4:15 PM Subject: [svg-developers] animating gradients Hi, I'm just starting to learn about SVG SMIL animation, and I'm attempting to perform a simple task involving linear gradients. What I'd like to do is have a simple linear gradient with a set of stops, and then animate the stops so that the colours cycle through the fill. What I mean by this is, given something like the following gradient linearGradient id=MyGradient stop offset=.10 stop-color=red/ stop offset=.30 stop-color=green / stop offset=.50 stop-color=yellow / stop offset=.70 stop-color=blue / stop offset=.90 stop-color=blue/ /linearGradient The first stop should go from offset .1 to 1, then 0 to .1, and repeat. The second stop offset should go from .3 to 1, then 0 to .3, and so on. It's easy enough for me to imagine how to represent this in script, as each stop is simply being animated the same way at each time step, starting from a different offset, but it's not clear to me how you can accomplish the same thing using SMIL. If anyone has any insight into this, I'd appreciate it if you could let me know. Thanks, Jake [Non-text portions of this message have been removed] - 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/
