<?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 xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
   width='100%' height='100%' viewBox='0 0 480 440'
   onload='InitSMIL(evt)'>

   <title>SMILScript</title>

   <desc>A partial SMIL implementation in script, to provide transitional functionality for Firefox, Batik, and other SVG Viewers without SMIL animation. Schepers: Thursday, October 27, 2005.</desc>

   <script type='text/ecmascript' xlink:href='smilScript.js' />

   <g transform='translate(15, 10)'>
      <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
      <text x='70' y='20' font-size='16' text-anchor='middle'>set</text>


      <circle id='circle_1' cx='35' cy='50' r='15' fill='orange' stroke-width='2'>
         <set attributeName='fill' attributeType='XML' from='orange' to='red' begin='mouseover' end='mouseout' fill='freeze'/>
         <set attributeName='stroke' attributeType='CSS' from='orange' to='black' begin='mouseover' end='mouseout' fill='freeze'/>
         <set attributeName='stroke-width' attributeType='XML' to='5' begin='mouseover' end='mouseout'/>
      </circle>

      <rect id='rect_2' x='20' y='75' width='30' height='30' rx='5' ry='5' fill='crimson'>
         <set attributeName='rx' attributeType='XML' from='5' to='15' begin='mouseover' fill='freeze'/>
         <set attributeName='ry' attributeType='XML' to='0' begin='mouseout'/>
      </rect>

      <ellipse id='ellipse_1' cx='35' cy='130' rx='20' ry='15' fill='indigo'>
         <set attributeName='fill' to='pink' begin='click+0.5s'/>
      </ellipse>

      <rect id='rect_timed' x='20' y='155' width='30' height='30' rx='5' ry='5' fill='red'>
         <set id='timed1' attributeName='fill' to='orange' begin='1.5s'/>
         <set attributeName='fill' to='lime' begin='3s'/>
      </rect>

      <g>
         <circle id='target_1' cx='95' cy='50' r='15' style='fill:gold; stroke:gold;'/>

         <polygon id='source_1' points='70,40 90,50 70,60' fill='lime'>
            <set xlink:href='#target_1' attributeName='fill' attributeType='XML' to='green' begin='click' fill='freeze'/>
            <set xlink:href='#target_1' attributeName='stroke' attributeType='CSS' to='green' begin='click' fill='freeze'/>
         </polygon>
      </g>

      <g>
         <circle id='target_2' cx='95' cy='90' r='15' fill='gold'>
            <set attributeName='fill' attributeType='XML' to='green' begin='source_2.click' fill='freeze'/>
         </circle>

         <polygon id='source_2' points='70,80 90,90 70,100' fill='lime' />
      </g>

      <g>
         <circle id='target_2' cx='95' cy='130' r='15' fill='gold'>
            <set attributeName='fill' attributeType='XML' to='green' begin='source_3a.click; source_3b.click' fill='freeze'/>
            <set attributeName='stroke' attributeType='XML' to='red' begin='source_3a.mouseover; source_3b.mouseover' fill='freeze'/>
         </circle>

         <polygon id='source_3a' points='70,120 90,130 70,140' fill='lime' />
         <polygon id='source_3b' points='120,120 100,130 120,140' fill='lime' />
      </g>

      <circle id='circle_inout' cx='95' cy='170' r='15' fill='orange'>
         <set attributeName='fill' attributeType='XML' from='orange' to='red' begin='mouseover' fill='freeze'/>
         <set attributeName='fill' attributeType='XML' from='red' to='orange' begin='mouseout' fill='freeze'/>
      </circle>
   </g>

   <g transform='translate(170, 10)'>
      <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
      <text x='70' y='20' font-size='16' text-anchor='middle'>animate</text>


      <circle id='circle_animate_1' cx='45' cy='55' r='10' fill='blue'>
         <animate attributeName='r' begin='0s' dur='1s' from='10' to='0' repeatCount='indefinite'/>
      </circle>

      <circle id='circle_animate_2' cx='45' cy='80' r='10' fill='blue'>
         <animate attributeName='r' begin='0s' dur='1s' from='10' to='0' repeatCount='3'/>
      </circle>

      <circle id='circle_animate_3' cx='45' cy='105' r='10' fill='blue'>
         <animate attributeName='r' begin='0s' dur='1s' from='0' to='10' repeatCount='indefinite'/>
      </circle>

      <circle id='circle_animate_4' cx='45' cy='140' r='20' fill='blue'>
         <animate attributeName='r' begin='0s' dur='4s' from='20' to='5' repeatCount='1' fill='freeze'/>
      </circle>


      <rect id='rect_animate_opacity_1' x='90' y='45' width='20' height='20' rx='5' ry='5' fill='crimson'>
         <animate attributeName='opacity' begin='0.5s' dur='4s' from='1' to='0' repeatCount='indefinite'/>
      </rect>

      <rect id='rect_animate_opacity_2' x='90' y='70' width='20' height='20' rx='5' ry='5' fill='crimson'>
         <animate attributeName='opacity' begin='0.5s' dur='4s' to='0' repeatCount='indefinite'/>
      </rect>

   </g>

   <g transform='translate(325, 10)'>
      <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
      <text x='70' y='20' font-size='16' text-anchor='middle'>animateColor</text>


      <circle id='circle_animateColor_1' cx='70' cy='50' r='15' fill='yellow' stroke-width='2'>
         <animateColor attributeName='fill' begin='2s' dur='4s' from='yellow' to='red' fill='freeze' repeatCount='1'/>
      </circle>

      <circle id='circle_animateColor_2' cx='70' cy='90' r='15' fill='yellow' stroke-width='2'>
         <animateColor attributeName='fill' begin='2s' dur='4s' from='rgb(0,0,0)' to='red' fill='freeze' repeatCount='1'/>
      </circle>

      <circle id='circle_animateColor_3' cx='70' cy='130' r='15' fill='yellow' stroke-width='2'>
         <animateColor attributeName='fill' begin='2s' dur='4s' from='#fff' to='red' fill='freeze' repeatCount='1'/>
      </circle>

   </g>


   <g transform='translate(15, 230)'>
      <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
      <text x='70' y='20' font-size='16' text-anchor='middle'>animateMotion</text>


      <path id='motionpath_1' stroke-width='1' stroke='blue' fill='none' d='M20,30 C100,90 -40,120 40,190'/>
      <circle id='circle_animateMotion_1' cx='0' cy='0' r='5' fill='blue'>
         <animateMotion dur='5s' fill='freeze' repeatCount='indefinite'>
            <mpath xlink:href='#motionpath_1'/>
         </animateMotion>
      </circle>

      <circle id='circle_animateMotion_2' cx='0' cy='0' r='5' fill='red'>
         <animateMotion path='M40,30 C-40,90 100,120 20,190' dur='5s' fill='freeze' repeatCount='indefinite' />
      </circle>

      <path id='motionpath_3' stroke-width='1' stroke='blue' fill='none' d='M60,30 L60,190'/>
      <circle id='circle_animateMotion_3' cx='0' cy='0' r='5' fill='blue'>
         <animateMotion begin='0s' dur='5s' fill='freeze' repeatCount='1'>
            <mpath xlink:href='#motionpath_3'/>
         </animateMotion>
      </circle>

      <rect id='rect_animateMotion_1' x='80' y='25' width='10' height='10' fill='crimson'>
         <animateMotion begin='0s' dur='5s' to='0, 160' repeatCount='1' fill='freeze'/>
      </rect>

      <rect id='rect_animateMotion_2' x='80' y='25' width='10' height='10' fill='crimson'>
         <animateMotion begin='0s' dur='5s' to='160' repeatCount='1' fill='freeze'/>
      </rect>

      <rect id='rect_animateMotion_3' x='80' y='25' width='10' height='10' fill='crimson'>
         <animateMotion begin='0s' dur='5s' to='160, 160' repeatCount='1' fill='freeze'/>
      </rect>
   </g>

   <g transform='translate(170, 230)'>
      <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
      <text x='70' y='20' font-size='16' text-anchor='middle'>animateTransform</text>

      <rect id='rect_animateTransform_rotate_1' x='25' y='40' width='30' height='30' fill='cornflowerblue' stroke='blue'>
         <animateTransform attributeName='transform' type='rotate' from='0' to='360' begin='click' dur='5s' repeatCount='2'/>
      </rect>

      <rect id='rect_animateTransform_rotate_2' x='75' y='40' width='30' height='30' fill='cornflowerblue' stroke='blue'>
         <animateTransform attributeType='XML' attributeName='transform' type='rotate' from='0,90,55' to='-360,90,55' begin='click' dur='5s' repeatCount='2'/>
      </rect>

      <rect id='rect_animateTransform_translate' x='25' y='90' width='30' height='30' fill='cornflowerblue' stroke='blue'>
         <animateTransform attributeName='transform' type='translate' from='0' to='50' begin='click' dur='5s' repeatCount='2'/>
      </rect>

      <rect id='rect_animateTransform_scale_1' x='25' y='140' width='30' height='30' fill='cornflowerblue' stroke='blue'>
         <animateTransform attributeName='transform' type='scale' from='1' to='2' begin='click' dur='5s' repeatCount='2'/>
      </rect>

      <rect id='rect_animateTransform_scale_2' x='75' y='140' width='30' height='30' fill='cornflowerblue' stroke='blue'>
         <animateTransform attributeName='transform' type='scale' from='1' to='0.3' begin='click' dur='5s' repeatCount='2'/>
      </rect>

   </g>

   <g transform='translate(325, 230)'>
      <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
      <text x='70' y='20' font-size='16' text-anchor='middle'>'prev', '.start', '.end'</text>


      <circle id='circle_start_end_1' cx='70' cy='70' r='10' fill='red'>
         <animate id='grow_1' attributeName='r' begin='0.5s' dur='3s' from='10' to='30' repeatCount='1' fill='freeze'/>
         <set attributeName='fill' begin='prev.begin' to='gold' repeatCount='1' fill='freeze'/>
         <set attributeName='fill' begin='grow_1.end' to='lime' repeatCount='1' fill='freeze'/>
      </circle>

      <circle id='circle_start_end_2' cx='70' cy='70' r='0' fill='green'>
         <animate id='grow_2' attributeName='r' begin='grow_1.end' dur='3s' from='0' to='10' repeatCount='1' fill='freeze'/>
         <set attributeName='fill' begin='grow_1.end+2s' to='gold' repeatCount='1' fill='freeze'/>
      </circle>

   </g>

   <text id='textOutput' x='100%' y='100%' font-size='18px' fill='crimson' text-anchor='end' baseline-shift='150%'><![CDATA[]]></text>

</svg>
