|
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<title>Transformationsanimationen</title>
<defs>
<path fill="#FFFF00" stroke="#FFBB00"
stroke-width="3" id="stern"
d="M 150 105 l 28 -50 l -58 0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"/>
<g id="Auge">
<path d="M100 100 a 7
12 0 1 1 10 0 a 20 20 0 0 0 -10 0" fill="white" stroke="#FFBB00"/>
<path d="M102 99 a 3 10
0 1 1 6 0 a 20 20 0 0 0 -6 0" fill="black" stroke="black"/>
</g>
<radialGradient id="sonnenverlauf">
<stop offset="5%"
stop-color="red"/>
<stop offset="96%"
stop-color="#FFFF55"/>
</radialGradient>
</defs>
<rect x="0" y="0" width="300"
height="300" fill="#000044">
<animateColor attributeName="fill"
attributeType="XML"
from="#000044" to="#AAAAFF"
begin="4s" dur="4s"
fill="freeze" />
</rect>
<g id="Sonne" transform="translate(70
120)" style="visibility:hidden">
<g>
<path fill="url(#sonnenverlauf)"
stroke="#FFFF55" d="M44.56,2.06c6.225,12.584,23.623,12.386,31.625-0.327c0,15.041,13.716,23.113,26.543,16.463
c-6.752,12.93,1.245,26.698,15.203,26.698c-12.174,8.431-12.1,24.146-0.238,31.732c-14.955,1.526-22.553,13.894-15.792,26.649
c-13.976-5.92-23.739,0.259-26.209,15.098c-10.316-11.846-22.159-10.973-31.915,0c-2.364-15.256-11.9-20.755-26.061-14.958
c5.665-14.028-2.386-26.941-16.273-26.941c12.208-9.608,11.221-23.462,0-31.529c14.819-1.253,20.75-14.042,15.765-27.221
C31.224,23.547,43.374,16.741,44.56,2.06z"
transform="translate(-60 -60)"/>
<circle cx="0" cy="0"
r="40" fill="#FFFF55" stroke="#FFFF55"
stroke-width="1"/>
<use xlink:href="#Auge" transform="rotate(-10)
translate(-115 -105) "/>
<use xlink:href="#Auge" transform="rotate(10)
translate(-95 -105) "/>
<path transform="scale(.5)"
d="M -40 20 c 20 4 20 20
40 20 c 20 0 20 -16 40 -20 c -10 2 -70 2 -80 0"
fill="black" stroke="#FFBB00"
/>
<animateMotion
dur="3s" begin="6s" fill="freeze" calcMode="spline"
keySplines=".25 0 0 .5"
path="M -60 250 c 0 -100
50 -200 60 -250"/>
<set attributeName="visibility"
attributeType="CSS" to="visible"
begin="6s" dur="3s"
fill="freeze"/>
</g>
</g>
<g id="Mond" transform="translate(70
120)">
<g>
<circle cx="0" cy="0"
r="60" fill="#FFFF00" stroke="#FFBB00"
stroke-width="3"/>
<use xlink:href="#Auge" transform="rotate(-10)
translate(-120 -110) "/>
<use xlink:href="#Auge" transform="rotate(10)
translate(90 -110) "/>
<path d="M -40 20 c 20 4 20 20 40
20 c 20 0 20 -16 40 -20 c -10 2 -70 2 -80 0" fill="black"
stroke="#FFBB00" />
<animateMotion dur="4s" begin="4s"
fill="freeze"
calcMode="spline"
keySplines="1 0 .8 .8"
path="M 0 0 c 120 -100 300
250 300 300"/>
<animateTransform dur="4s" begin="4s"
fill="freeze"
attributeName="transform"
attributeType="XML"
type="scale"
keyTimes="0;0.6;1" values="1;0.8;0.3"/>
</g>
</g>
<g>
<animate attributeName="fill-opacity"
attributeType="XML"
begin="4s" dur="4s"
fill="freeze"
from="1" to="0"/>
<animate attributeName="stroke-opacity"
attributeType="XML"
begin="4s" dur="4s"
fill="freeze"
from="1" to="0"/>
<path fill="#FFFF00" stroke="#FFBB00"
stroke-width="3"
d="M 150 105 l 28 -50 l -58
0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
transform="translate(240
230) scale(0.2) ">
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="0s" dur="1s"
fill="remove"/>
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="3s" dur="1s"
fill="remove"/>
</path>
<path fill="#FFFF00" stroke="#FFBB00"
stroke-width="3"
d="M 150 105 l 28 -50 l -58
0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
transform="translate(70 240)
scale(0.2) ">
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="1s" dur="1s"
fill="remove"/>
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="4s" dur="1s"
fill="remove"/>
</path>
<path fill="#FFFF00" stroke="#FFBB00"
stroke-width="3"
d="M 150 105 l 28 -50 l -58
0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
transform="translate(220
100) scale(0.1) ">
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="0.5s" dur="1s"
fill="remove"/>
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="1s" dur="1s"
fill="remove"/>
</path>
<path fill="#FFFF00" stroke="#FFBB00"
stroke-width="3"
d="M 150 105 l 28 -50 l -58
0 L 101 21 L 81 55 l -58 0 l 28 50
l -28 50 l 58 0 l 20 34 l 20 -34 l 58 0 z"
transform="translate(250
20) scale(0.1) ">
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="0.8s" dur="1s"
fill="remove"/>
<animateColor attributeName="fill"
attributeType="XML"
from="#FFFF00" to="#FFFFEE"
begin="2.8s" dur="1s"
fill="remove"/>
</path>
<use xlink:href="#stern" transform="translate(260
80) scale(0.08) "/>
<use xlink:href="#stern" transform="translate(10
250) scale(0.1) "/>
<use xlink:href="#stern" transform="translate(240
180) scale(0.1) "/>
<use xlink:href="#stern" transform="translate(150
200) scale(0.3) "/>
</g>
</svg>
|
|
