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/
