Animate the svg rectangle to grow like music wave - HTML CSS SVG

HTML CSS examples for SVG:Rectangle

  1. HOME
  2. HTML CSS
  3. SVG
  4. Rectangle

Description

Animate the svg rectangle to grow like music wave

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--  w w w  .  j  a va2 s  . c  om-->
 <body> 
  <div id="akbar"> 
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewbox="0 0 400 200"> 
    <g transform="scale(1,-1) translate(0,-200)"> 
     <rect x="50" y="0" fill="#f00" width="100" height="100"> 
      <animate attributeName="height" from="0" to="100" dur="1s" fill="freeze" values="0; 200; 150; 160; 150; 160" keyTimes="0; 0.2; 0.4; 0.6; 0.8; 1" keySplines=".42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;" /> 
     </rect> 
     <rect x="150" y="0" fill="#f70" width="100" height="200"> 
      <animate attributeName="height" from="0" to="200" dur="0.5s" fill="freeze" /> 
     </rect> 
     <rect x="250" y="0" fill="#ec0" width="100" height="150"> 
      <animate attributeName="height" from="0" to="150" dur="0.5s" fill="freeze" /> 
     </rect> 
    </g> 
   </svg> 
  </div>  
 </body>
</html>

Related Tutorials