SVG: animate Motion with animated path - HTML CSS SVG

HTML CSS examples for SVG:Path

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

Description

SVG: animate Motion with animated path

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  av a  2s. c  om-->
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> 
   <defs> 
    <path id="curve0" stroke="black" fill="inherit" stroke-width="3" fill-opacity=".5" d="M 0,100
           C  50,140  50,50, 100,50 C 150,50 150,100 200,100
           C 300,100 200,50, 300,50 C 400,50 300,100 400,100"> 
     <animate attributeName="d" dur="5s" values="M 0,100
           C  50,140  50,50, 100,50 C 150,50 150,150 200,150
           C 250,150 250,50, 300,50 C 350,50 350,100 400,100;
            M 0,100
           C  50,140  50,150, 100,150 C 150,150 150, 50 200, 50
           C 250, 50 250,150, 300,150 C 350,150 350,100 400,100;
            M 0,140
           C  50,100  50,50, 100,50 C 450,50 150,150 200,150
           C 250,150 450,50, 300,50 C 350,50 350,100 400,100" repeatCount="indefinite" /> 
    </path> 
    <path id="curve1" stroke="black" fill="yellowgreen" stroke-width="3" fill-opacity=".5"> 
     <animate attributeName="d" dur="3s" values="M 100,0  0,100   70,50   130,150  200,100  z;
                M 100,0  0,100   70,150  130, 50  200,100  z;
                M 100,0  0,100   70,50   130,150  200,100  z" repeatCount="indefinite" /> 
    </path> 
   </defs> 
   <g id="paths"> 
    <use xlink:href="#curve1" transform="translate(0,20)" fill="cyan" /> 
   </g> 
   <g id="ellipses"> 
    <ellipse id="One" cx="0" cy="0" rx="16" ry="8" fill="#555" opacity=".85" stroke="black" stroke-width="2"> 
     <animate attributeName="fill" dur="5s" values="red;mediumvioletred;yellowgreen;red" repeatCount="indefinite" /> 
     <animatemotion dur="5s" rotate="auto" repeatcount="indefinite"> 
      <mpath xlink:href="#curve1" /> 
     </animatemotion> 
    </ellipse> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials