<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg" width="320" height="240"
      xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <!-- ============================= -->
  <!-- SVG Text, defined as a Shape  -->
  <!-- ============================= --> 
  <g id="SVG_Text" style="fill-rule:nonzero;" transform="translate(-86.25, -54.25)">
   <desc>SVG Text defined as a path element</desc>
   <g transform="scale(.5, .5)">
   <path d="M87.469,7c0.781,2.656,1.488,6.684,2.117,12.074C90.527,27.121,91,33.375,91,37.828c0,1.406-0.156,2.93-0.469,4.57l-1.176,0.352l-8.449-0.586L79.5,41.926c-3.453-10.336-6.906-17.344-10.359-21.027C63.176,14.633,56.152,11.5,48.07,11.5
   c-7.691,0-13.793,2.016-18.305,6.043C25.254,21.574,23,26.559,23,32.5c0,5.008,2.219,9.82,6.664,14.434c4.363,4.617,13.691,9.004,27.988,13.16c4.789,1.387,10.582,3.621,17.375,6.699c6.793,3.082,11.941,6.469,15.449,10.156c4.676,4.871,7.891,9.563,9.645,14.078
   c1.75,4.516,2.629,10.148,2.629,16.898c0,7.383-1.375,14.648-4.117,21.793c-1.492,3.77-3.887,7.344-7.18,10.719c-2.352,2.355-6,5.121-10.941,8.301c-4.945,3.18-10.063,5.477-15.355,6.891c-5.297,1.414-12.102,2.121-20.414,2.121
   c-5.492,0-12.043-0.793-19.652-2.375l-14.117-4.156c-3.922-1.109-6.395-2.098-7.414-2.969c-0.395-0.313-0.746-1.051-1.059-2.223v-1.289c0-0.859-0.18-6.203-0.535-16.035c-0.145-5.07-0.215-8.66-0.215-10.77v-4.449l11-0.234c3.758,8.699,6.184,13.949,7.281,15.75
   c2.426,4,5.105,7.23,8.043,9.699s6.441,4.43,10.512,5.879s8.496,2.172,13.273,2.172c4.227,0,8.887-0.898,13.977-2.699s9.18-4.758,12.273-8.867s4.641-8.516,4.641-13.215c0-5.789-2.727-11.152-8.176-16.086c-3.32-3.055-12.188-7.125-26.609-12.215
   s-24.414-9.629-29.977-13.621c-5.566-3.992-9.957-9.332-13.168-16.023C1.605,57.336,0,50.898,0,44.719c0-12.441,4.473-23.004,13.418-31.691C22.363,4.344,35.551,0,52.977,0c3.766,0,9.336,0.672,16.715,2.016C74.164,2.809,80.09,4.469,87.469,7z"/>
  <path d="M162.837,159L105.165,37.988L118.657,34l44.18,94.328L207.138,34l13.277,3.52L162.837,159z"/>
  <path d="M271.21,122.664c-2.629-1.059-4.727-2.43-6.297-4.117c-1.57-1.684-3.02-4.055-4.352-7.113c-0.945-1.961-1.531-4.273-1.766-6.938c-0.551-6.27-0.824-10.465-0.824-12.582c0-7.758,1.547-13.953,4.648-18.578c3.098-4.625,6.531-7.293,10.297-7.996
   c3.375-0.391,5.453-0.59,6.238-0.59c6.039,0,10.727,2.156,14.063,6.469s5.004,12.738,5.004,25.281c0,9.484-1.863,16.48-5.59,20.988s-8.219,6.762-13.477,6.762c-2.668,0-5.316-0.527-7.945-1.586z M226.007,182.211c-3.023,3.004-4.535,6.426-4.535,10.254
   c0,3.906,1.801,7.582,5.41,11.023c4.703,4.609,11.195,7.93,19.469,9.965c8.273,2.027,17.629,3.047,28.063,3.047c9.645,0,18.684-1.098,27.117-3.285c8.43-2.195,14.883-4.68,19.352-7.457c4.469-2.781,8.02-6.383,10.648-10.801c2.625-4.426,3.941-8.945,3.941-13.563
   c0-8.609-3.727-15.891-11.18-21.84c-7.531-5.949-20.676-8.926-39.426-8.926c-0.941,0-2.078,0.043-3.41,0.121c-4.711,0.234-7.496,0.352-8.359,0.352c-6.906,0-12.438-0.156-16.594-0.469c-1.098-0.234-1.961-0.391-2.586-0.469c-3.219-0.469-5.516-1.324-6.887-2.574
   c-1.375-1.246-2.059-2.648-2.059-4.211c0-1.715,0.672-3.199,2.023-4.449c2.695-2.57,7.41-5.691,14.152-9.359c4.941,1.082,8.785,1.777,11.531,2.082c1.883,0.234,5.41,0.348,10.59,0.348c8.078,0,16.16-2.148,24.242-6.445c5.805-3.047,10.371-7.164,13.707-12.359
   s5.004-10.645,5.004-16.348c0-4.84-0.941-9.957-2.816-15.348c3.172,0.156,7.395,1.445,12.66,3.863c2.242,1.094,3.598,1.637,4.063,1.637c1.238,0,2.438-0.844,3.602-2.535c1.16-1.688,1.742-4.695,1.742-9.023c0-4.953-0.465-8.098-1.387-9.434
   C343.159,64.672,341.929,64,340.39,64c-2.078,0-4.543,0.441-7.391,1.316c-4.082,1.438-9.434,2.832-16.055,4.184c-2.992-2.68-6.492-5.277-10.5-7.801l-4.484-1.652c-3.855-1.418-6.609-2.285-8.258-2.602c-3.543-0.629-7.75-0.945-12.625-0.945
   c-12.117,0-22.008,1.98-29.676,5.938c-7.672,3.961-13.707,9.938-18.113,17.93c-2.047,5.563-3.066,10.813-3.066,15.75c0,5.488,1.871,11.055,5.621,16.695c2.887,4.313,8.195,8.777,15.926,13.402c-15.273,8.68-23.848,13.957-25.727,15.832
   c-1.883,1.875-2.82,4.574-2.82,8.09c0,4.379,1.758,8.344,5.281,11.902c3.52,3.555,10.559,6.664,21.121,9.324c-12.723,4.219-20.594,7.836-23.617,10.848z M277.187,209c-6.609,0-12.789-0.781-18.531-2.344c-5.746-1.563-9.84-3.691-12.277-6.387
   s-3.656-5.41-3.656-8.145c0-5.156,2.184-9.301,6.551-12.422c4.367-3.129,12.922-4.691,25.672-4.691l14.52,0.238c6.609,0,11.918,0.391,15.934,1.172c2.832,0.625,5.371,1.738,7.613,3.34s3.793,3.223,4.66,4.863s1.301,3.32,1.301,5.039
   c0,3.125-2.047,6.289-6.137,9.492c-6.453,4.922-15.504,8.047-27.148,9.375c-3.781,0.313-6.613,0.469-8.5,0.469z"/>
   </g>
  </g> <!-- SVG_text -->

  <!-- ================================== -->
  <!-- Define Background Gradient         -->
  <!-- ================================== -->
  <linearGradient id="backgroundGradient" x1="0" y1="0" x2="0" y2="120" gradientUnits="userSpaceOnUse">
   <stop offset="0%" style="stop-color:black" />
   <stop offset="20%" style="stop-color:rgb(103, 103, 152)" />
   <stop offset="50%" style="stop-color:white" />
   <stop offset="80%" style="stop-color:rgb(103, 103, 152)" />
   <stop offset="100%" style="stop-color:black" />
  </linearGradient>
 </defs>

 <rect width="240" height="120" x="30" y="0" style="fill:url(#backgroundGradient)" />

 <g transform="translate(150, 60)">
 <rect x="-40" y="-40" width="80" height="80" style="fill:white; fill-opacity:.5" >
     <animateTransform attributeName="transform" type="rotate" values="0;20;40;200;100;200;80;210;170;0" additive="sum" dur="12s" repeatDur="indefinite"/>
 </rect>
 </g>

 <g transform="translate(150, 60)">
 <rect x="-80" y="-20" width="160" height="40" style="fill:white; fill-opacity:.5" >
     <animateTransform attributeName="transform" type="rotate" values="0;-180; 180; 360" additive="sum" dur="12s" repeatDur="indefinite"/>
 </rect>
 </g>

 <use xlink:href="#SVG_Text" style="fill:black" transform="translate(150, 60)">
     <animateTransform attributeName="transform" type="rotate" values="0;30;50;160;60;220;240;200;190;0" additive="sum" dur="12s" repeatDur="indefinite"/>
     <animateTransform attributeName="transform" type="scale"  values=".5, .5; 1 1;0.25 0.25; .5 .5"   additive="sum" dur="12s" repeatDur="indefinite"/>
 </use>

 <text x="5" y="140" style="fill:gray; font-family:Verdana; font-size:9;">
  <tspan>This example illustrates animation in </tspan>
  <tspan x="5" dy="15">SVG.  It shows two animated </tspan>
  <tspan x="5" dy="15">rectangles and an animated text String. </tspan>
  <tspan x="5" dy="15">For each, an &lt;animateTransform&gt; </tspan>
  <tspan x="5" dy="15">element defines how an element should </tspan>
  <tspan x="5" dy="15">be transformed (e.g. rotated or scaled) </tspan>
  <tspan x="5" dy="15">over time.</tspan>
 </text>
</svg>

