simple data animation svg

by tomik23

HTML

<svg width="500px" height="300px">
  <g transform="scale(1, -1) translate(0, -300)">
    <rect x="0" y="0" height="30%" width="15%">
      <animate attributeName="height" from="0" to="30%" dur=".5s" />
    </rect>
    <rect x="20%" y="0" height="10%" width="15%">
      <animate attributeName="height" from="0" to="10%" dur=".5s" />
    </rect>
    <rect x="40%" y="0" height="20%" width="15%">
      <animate attributeName="height" from="0" to="20%" dur=".5s" />
    </rect>
    <rect x="60%" y="0" height="70%" width="15%">
      <animate attributeName="height" from="0" to="70%" dur=".5s" />
    </rect>
    <rect x="80%" y="0" height="40%" width="15%">
      <animate attributeName="height" from="0" to="40%" dur=".5s" />
    </rect>
  </g>
</svg>

CSS

rect {
  fill: red;
}