Create a SVG animated rectangle

A simple example of creating a SVG animated rectangle.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin0px;
        padding0px;
      }
    </style>
  </head>
  <body>
    <svg height="500" width="500">
      <rect id="rec" x="100" y="100" width="300" height="100" style="fill:lime"> 
         <animate attributeName="width" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="100" to="300" /> 
    <animate attributeName="height" attributeType="XML" begin="2s" dur="4s" fill="freeze" from="100" to="300" />     
      </rect>
    </svg>
  </body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX