New edition of Animation of circle with the help of html5 and css ~ Code For Animate

Thursday 8 June 2017

New edition of Animation of circle with the help of html5 and css

what should you have?
● Basic knowledge of html and css.
● Any text editor better if you use any code editor.

Method to create this animation.
step first: For creating a circle on any html page we have to define an svg (scalable vector graphics) first and define its height and width. For this animation i have set the value of height equal 600 and width equal to 600.
second step: Create circle by using circle tag and define there position on x-axis and y-axis by cx and cy respectively. The circle will appear on top other circle or any other elements which are coded first. For example

Third step :- First take a look to this post , so you can understand how to create circle with animation as in the above animation.Click here
Forth step :- The code for making animation of circle for the above animation is below.

<style>
@keyframes div_box{
   0%{transform:rotate(360deg);} 
}
body {
    background : white;
    color : black;
}
.div_box {
     width:600px; 
     height:600px;
     background-color:none;
     margin-top:70px;
     margin-bottom:70px;
     animation: div_box 1.3s linear infinite;
  }

</style>

<div class="div_box">
        

<svg height="600" width="600">
    <circle cx="100" cy="100" fill="red" r="0">
      <animate attributename="r" dur="10s" repeatcount="100" to="150"> </animate>
  
      <animate attributeName="fill" to="blue" dur="10s" repeatCount="100" ></animate>
 
     <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
      <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
   </circle>
    
    
    <circle cx="500" cy="500" fill="red" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="150"> </animate>
       
       <animate attributeName="fill" to="blue" dur="10s" repeatCount="100" ></animate>
    
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
  
    <circle cx="500" cy="100" fill="red" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="150"> </animate>
   
       <animate attributeName="fill" to="blue" dur="10s" repeatCount="100" ></animate>
   
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    
    
    <circle cx="100" cy="500" fill="red" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="150"> </animate>
    
       <animate attributeName="fill" to="blue" dur="10s" repeatCount="100" ></animate>
       
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    
    
    <circle cx="300" cy="100" fill="blue" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="150"> </animate>
   
       <animate attributeName="fill" to="red" dur="10s" repeatCount="100" ></animate>
      
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    
    <circle cx="100" cy="300" fill="blue" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="150"> </animate>
       
       <animate attributeName="fill" to="red" dur="10s" repeatCount="100" ></animate>
     
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    <circle cx="500" cy="300" fill="blue" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="150"> </animate>
  
       <animate attributeName="fill" to="red" dur="10s" repeatCount="100" ></animate>
     
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    
    <circle cx="300" cy="500" fill="blue" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="150"> </animate>
   
       <animate attributeName="fill" to="red" dur="10s" repeatCount="100" ></animate>
      
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    <circle cx="300" cy="300" fill="orange" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="150"> </animate>
   
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    
    <circle cx="150" cy="150" fill="green" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="90"> </animate>
       
      <animate attributeName="fill" to="lightgreen" dur="10s" repeatCount="100" ></animate>
     
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    
    <circle cx="150" cy="450" fill="green" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="90"> </animate>
       
       <animate attributeName="fill" to="lightgreen" dur="10s" repeatCount="100" ></animate>
     
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    
    <circle cx="450" cy="150" fill="green" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="90"> </animate>
       
       <animate attributeName="fill" to="lightgreen" dur="10s" repeatCount="100" ></animate>
     
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    <circle cx="450" cy="450" fill="green" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="90"> </animate>
      
       <animate attributeName="fill" to="lightgreen" dur="10s" repeatCount="100" ></animate>
     
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    
    <circle cx="300" cy="300" fill="yellow" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="90"> </animate>
    
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    
    
    <circle cx="220" cy="220" fill="violet" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="50"> </animate>
    
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    <circle cx="380" cy="220" fill="violet" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="50"> </animate>
    
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    <circle cx="220" cy="380" fill="violet" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="50"> </animate>
    
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    
    <circle cx="380" cy="380" fill="violet" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="50"> </animate>
    
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
    
    <circle cx="300" cy="300" fill="lightgreen" r="0">
       <animate attributename="r" dur="10s" repeatcount="100" to="50"> </animate>
    
       <animate attributeName="fill" to="darkgreen" dur="10s" repeatCount="100" ></animate>
     
       <animate attributename="cx" dur="10s" repeatcount="100" to="300"> </animate>
   
       <animate attributename="cy" dur="10s" repeatcount="100" to="300"></animate>
    </circle>
<ellipse cx="300" cy="300" fill="red">
    <animate attributename="rx" dur="10s" repeatcount="100" to="50"> </animate>
 <animate attributename="ry" dur="10s" repeatcount="100" to="7"> </animate>
</ellipse>

<ellipse cx="300" cy="300" fill="red">
    <animate attributename="rx" dur="10s" repeatcount="100" to="7"> </animate>
 <animate attributename="ry" dur="10s" repeatcount="100" to="50"> </animate>
</ellipse>

</svg>

Fifth step : Now create an div tag and give a class attribute to it ( div_box in my case)and place the above code inside it.and Then apply the following style code to it.

Your animation is complete. If you have any problems in creating this code you can download it for free from here :-
Download this animation file

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)