Create a SVG animated rectangle

A simple example of creating a SVG animated rectangle. 
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </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>
List

Responses

0 Replies