|
1 <?xml version="1.0" standalone="no"?> |
|
2 <svg width="8cm" height="8cm" viewBox="0 0 400 400" |
|
3 xmlns="http://www.w3.org/2000/svg" |
|
4 xmlns:xlink="http://www.w3.org/1999/xlink/" |
|
5 baseProfile="tiny" version="1.2"> |
|
6 <title>Spheres</title> |
|
7 <desc>Gradient filled spheres with different colors.</desc> |
|
8 <defs> |
|
9 <!-- Create radial gradients for each circle to make them look like |
|
10 spheres. --> |
|
11 <radialGradient id="blueSphere" gradientUnits="userSpaceOnUse" |
|
12 cx="0" cy="0" r="100" fx="-50" fy="-50"> |
|
13 <stop offset="0%" stop-color="white" /> |
|
14 <stop offset="75%" stop-color="blue" /> |
|
15 <stop offset="100%" stop-color="#222244" /> |
|
16 </radialGradient> |
|
17 <radialGradient id="redSphere" gradientUnits="userSpaceOnUse" |
|
18 cx="0" cy="0" r="100" fx="-50" fy="-50"> |
|
19 <stop offset="0%" stop-color="white" /> |
|
20 <stop offset="75%" stop-color="red" /> |
|
21 <stop offset="100%" stop-color="#442222" /> |
|
22 </radialGradient> |
|
23 <radialGradient id="greenSphere" gradientUnits="userSpaceOnUse" |
|
24 cx="0" cy="0" r="100" fx="-50" fy="-50"> |
|
25 <stop offset="0%" stop-color="white" /> |
|
26 <stop offset="75%" stop-color="green" /> |
|
27 <stop offset="100%" stop-color="#113311" /> |
|
28 </radialGradient> |
|
29 <radialGradient id="yellowSphere" gradientUnits="userSpaceOnUse" |
|
30 cx="0" cy="0" r="100" fx="-50" fy="-50"> |
|
31 <stop offset="0%" stop-color="white" /> |
|
32 <stop offset="75%" stop-color="yellow" /> |
|
33 <stop offset="100%" stop-color="#444422" /> |
|
34 </radialGradient> |
|
35 <radialGradient id="shadowGrad" gradientUnits="userSpaceOnUse" |
|
36 cx="0" cy="0" r="100" fx="-50" fy="50"> |
|
37 <stop offset="0%" stop-color="black" stop-opacity="1.0" /> |
|
38 <stop offset="100%" stop-color="white" stop-opacity="0.0" /> |
|
39 </radialGradient> |
|
40 |
|
41 <!-- Define a shadow for each sphere. --> |
|
42 <circle id="shadow" fill="url(#shadowGrad)" cx="0" cy="0" r="100" /> |
|
43 </defs> |
|
44 <g fill="#ffee99" stroke="none" > |
|
45 <rect x="0" y="0" width="400" height="400" /> |
|
46 </g> |
|
47 <g fill="white" stroke="none" > |
|
48 <rect x="0" y="175" width="400" height="225" /> |
|
49 </g> |
|
50 <g transform="translate(200,290) scale(2.0,1.0) rotate(45)" > |
|
51 <rect fill="#a6ce39" x="-69" y="-69" width="138" height="138" /> |
|
52 <circle fill="black" cx="0" cy="0" r="50" /> |
|
53 <circle fill="#a6ce39" cx="0" cy="0" r="33" /> |
|
54 <path fill="black" d="M 37,50 L 50,37 L 12,-1 L 22,-11 L 10,-24 L -24,10 |
|
55 L -11,22 L -1,12 Z" /> |
|
56 <animateTransform attributeName="transform" type="rotate" values="0; 360" |
|
57 begin="0s" dur="10s" fill="freeze" /> |
|
58 </g> |
|
59 <g transform="translate(200,175)"> |
|
60 <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" /> |
|
61 <circle fill="url(#blueSphere)" cx="0" cy="0" r="100" /> |
|
62 </g> |
|
63 <g transform="translate(315,240)"> |
|
64 <g transform="scale(0.5,0.5)"> |
|
65 <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" /> |
|
66 <circle fill="url(#redSphere)" cx="0" cy="0" r="100" /> |
|
67 </g> |
|
68 </g> |
|
69 <g transform="translate(80,275)"> |
|
70 <g transform="scale(0.65,0.65)"> |
|
71 <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" /> |
|
72 <circle fill="url(#greenSphere)" cx="0" cy="0" r="100" /> |
|
73 </g> |
|
74 </g> |
|
75 <g transform="translate(255,325)"> |
|
76 <g transform="scale(0.3,0.3)"> |
|
77 <use xlink:href="#shadow" transform="translate(25,55) scale(1.0,0.5)" /> |
|
78 <circle fill="url(#yellowSphere)" cx="0" cy="0" r="100" /> |
|
79 </g> |
|
80 </g> |
|
81 </svg> |
