Benutzer:Lily/rotating

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" viewBox="-50 -50 300 100"
	xmlns="http://www.w3.org/2000/svg">
	<defs>
		<radialGradient id="shiny"
    fx="0.25" fy="0.25">
			<stop offset="0%" stop-color="#ffffff" />
			<stop offset="50%" stop-color="#ddb733" />
			<stop offset="75%" stop-color="#997800" />
			<stop offset="100%" stop-color="#000000" />
		</radialGradient>
		<radialGradient id="bl" fx="0.25" fy="0.25">
			<stop offset="0%" stop-color="#fff" stop-opacity="0" />
			<stop offset="50%" stop-color="#000" stop-opacity="0.01" />
			<stop offset="94%" stop-color="#000" stop-opacity="0.3" />
			<stop offset="97%" stop-color="#000" stop-opacity="0.95" />
			<stop offset="100%" stop-color="#000"  stop-opacity="1" />
		</radialGradient>
		<clipPath id="cl">
			<circle r="50" />
		</clipPath>
		<filter id="f1" filterUnits="objectBoundingBox"
          x="-0.25" y="-0.25" width="1.5" height="1.5">
			<feGaussianBlur in="SourceAlpha"
       stdDeviation="3"/>
		</filter>
		<linearGradient id="g1">
			<stop offset="0" stop-color="#f00">
				<animate attributeName="stop-color" values="red; #ff0; #0f0; cyan; blue; #f0f; red" dur="22s" fill="freeze" repeatDur="indefinite" />
			</stop>
			<stop offset="0.2857" stop-color="#ff0" >
				<animate attributeName="stop-color" values="#ff0; #0f0; cyan; blue; #f0f; red; #ff0" dur="22s" fill="freeze" repeatDur="indefinite" />
			</stop>
			<stop offset="0.4286" stop-color="#0f0" >
				<animate attributeName="stop-color" values="#0f0; cyan; blue; #f0f; red; #ff0; #0f0" dur="22s" fill="freeze" repeatDur="indefinite" />
			</stop>
			<stop offset="0.5714" stop-color="cyan" >
				<animate attributeName="stop-color" values="cyan; blue; #f0f; red; #ff0; #0f0; cyan" dur="22s" fill="freeze" repeatDur="indefinite" />
			</stop>
			<stop offset="0.7142" stop-color="blue" >
				<animate attributeName="stop-color" values="blue; #f0f; red; #ff0; #0f0; cyan; blue" dur="22s" fill="freeze" repeatDur="indefinite" />
			</stop>
			<stop offset="0.8571" stop-color="#f0f" >
				<animate attributeName="stop-color" values="#f0f; red; #ff0; #0f0; cyan; blue; #f0f" dur="22s" fill="freeze" repeatDur="indefinite" />
			</stop>
			<stop offset="1" stop-color="red">
				<animate attributeName="stop-color" values="red; #ff0; #0f0; cyan; blue; #f0f; red" dur="22s" fill="freeze" repeatDur="indefinite" />
			</stop>
		</linearGradient>
		<linearGradient id="r">
			<animate attributeName="x1" dur="22s" values="0; 0; 0; 1; 1; 1; 1; 0; 0" repeatDur="indefinite" calcMode="linear" />
			<animate attributeName="x2" dur="22s" values="1; 1; 0; 0; 0; 0; 1; 1; 1" repeatDur="indefinite" calcMode="linear" />
			<animate attributeName="y1" dur="22s" values="0; 0; 0; 0; 1; 1; 1; 1; 0" repeatDur="indefinite" calcMode="linear" />
			<animate attributeName="y2" dur="22s" values="0; 1; 1; 1; 1; 0; 0; 0; 0" repeatDur="indefinite" calcMode="linear" />
			<stop offset="0" stop-color="red"/>
			<stop offset="0.333" stop-color="#ff0"/>
			<stop offset="0.5" stop-color="#0f0"/>
			<stop offset="0.666" stop-color="cyan"/>
			<stop offset="0.833" stop-color="blue"/>
			<stop offset="1" stop-color="#f0f"/>
		</linearGradient>
		<linearGradient id="s">
			<stop offset="0" stop-color="red"/>
			<stop offset="0.333" stop-color="#ff0"/>
			<stop offset="0.5" stop-color="#0f0"/>
			<stop offset="0.666" stop-color="cyan"/>
			<stop offset="0.833" stop-color="blue"/>
			<stop offset="1" stop-color="#f0f"/>
		</linearGradient>
		<linearGradient id="t">
			<animateTransform attributeName="gradientTransform" type="rotate" dur="22s" values="0; 90; 90; 180; 0" repeatDur="indefinite" calcMode="linear" />
			<stop offset="0" stop-color="red"/>
			<stop offset="0.333" stop-color="#ff0"/>
			<stop offset="0.5" stop-color="#0f0"/>
			<stop offset="0.666" stop-color="cyan"/>
			<stop offset="0.833" stop-color="blue"/>
			<stop offset="1" stop-color="#f0f"/>
		</linearGradient>
		<mask id="light" maskContentUnits="objectBoundingBox">
			<rect fill="url(#shiny)" width="1" height="1" />
		</mask>
	</defs>
	<g>
		<set attributeName="display" to="none" begin="ich.click" />
		<circle r="50" fill="url(#s)" opacity="1">
			<animateTransform attributeName="transform"
type="rotate" values="0; 360"
repeatDur="indefinite" dur="22s"
additive="replace" fill="freeze"/>
		</circle>
		<circle r="50" fill="#fff" mask="url(#light)"  opacity="0"/>
		<circle r="50" fill="url(#bl)" clip-path="url(#cl)" filter="url(#f1)" id="ich" opacity="0"/>
	</g>
	<g>
		<set attributeName="display" to="none" begin="ich.click" />
		<circle r="50" cx="100" fill="url(#r)" opacity="1"></circle>
		<circle r="50" cx="100" fill="#fff" mask="url(#light)"  opacity="0"/>
		<circle r="50" cx="100" fill="url(#bl)" clip-path="url(#cl)" filter="url(#f1)" opacity="0"/>
	</g>
	<g>
		<set attributeName="display" to="none" begin="ich.click" />
		<circle r="50" cx="50" fill="url(#t)" opacity="1"></circle>
		<circle r="50" cx="200" fill="#fff" mask="url(#light)"  opacity="0"/>
		<circle r="50" cx="200" fill="url(#bl)" clip-path="url(#cl)" filter="url(#f1)" opacity="0"/>
	</g>
</svg>