On Thu, 23 Sep 2010 21:48:12 +0200, t...@ymail.com <t...@ymail.com> wrote:

> --- In svg-developers@yahoogroups.com, Jacob Beard <jbea...@...> wrote:
>>
>> On Tue, Sep 21, 2010 at 3:55 PM, t...@... <t...@...> wrote:
>>
>> > What about this variant:
>> >
>> > http://wwwpub.zih.tu-dresden.de/~s9783698/scrolling-radial-colors.xml

I had a play, and came up with the following script-free version (easier  
than trying to read script, for me):

Note that there seem to be some colour transitions that feel more natural  
than others. I suspect there is someone who knows more about colour and  
could explain how to adjust it to make everything seem beautiful, but this  
seems to at least work...

<svg width="100%" height="100%" viewBox="0 0 800 400" version="1.1"
      xmlns="http://www.w3.org/2000/svg";>
   <title>rainbow circle</title>
   <desc>Example - fill a circle using an animated
            radial gradient paint server to make a colour progression</desc>
   <g>
     <defs>
       <radialGradient id="circularRainbowGradient" r=".6">
         <stop offset=".0" stop-color="red">
           <animateColor values="violet;blue;green;yellow;orange;red"  
dur="4s" begin="0s" repeatCount="indefinite" attributeName="stop-color"/>
         </stop>
         <stop offset=".2" stop-color="orange">
           <animateColor values="red;violet;blue;green;yellow;orange"  
dur="4s" begin="0s" repeatCount="indefinite" attributeName="stop-color"/>
         </stop>
         <stop offset=".4" stop-color="yellow">
           <animateColor values="orange;red;violet;blue;green;yellow"  
dur="4s" begin="0s" repeatCount="indefinite" attributeName="stop-color"/>
         </stop>
         <stop offset=".6" stop-color="green">
           <animateColor values="yellow;orange;red;violet;blue;green"  
dur="4s" begin="0s" repeatCount="indefinite" attributeName="stop-color"/>
         </stop>
         <stop offset=".8" stop-color="blue">
           <animateColor values="green;yellow;orange;red;violet;blue"  
dur="4s" begin="0s" repeatCount="indefinite" attributeName="stop-color"/>
         </stop>
         <stop offset="1" stop-color="violet">
           <animateColor values="blue;green;yellow;orange;red;violet"  
dur="4s" begin="0s" repeatCount="indefinite" attributeName="stop-color"/>
         </stop>
       </radialGradient>
     </defs>

     <circle fill="url(#circularRainbowGradient)" stroke="none" cx="400"  
cy="100" r="100">
     </circle>
   </g>

</svg>

cheers

-- 
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/

Reply via email to