Animate an element to rotate and also orbit using SVG - HTML CSS SVG

HTML CSS examples for SVG:Animation

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

Description

Animate an element to rotate and also orbit using SVG

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--   ww w  .j  av  a 2s. c  o m-->
 <body> 
  <svg width="320" height="320" viewbox="-160 -160 320 320"> 
   <circle fill="#0f0" stroke="#000" cx="0" cy="0" r="5" /> 
   <g> 
    <animatetransform attributeName="transform" attributeType="XML" type="rotate" from="360" to="0" dur="7.33s" repeatCount="indefinite" /> 
    <g transform="translate(0, 100)"> 
     <path fill="orange" stroke="#000" d="M0-20L10,10L0,0L-10,10Z"> 
      <animatetransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="1s" repeatCount="indefinite" /> 
     </path> 
    </g> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials