April 2017 ~ Code For Animate

Tuesday, 25 April 2017

Ten animated circle with same centre

Animation of circle in a sqence with the help of html5 and inline css

Use the following code to make the above animation with any note pad and save the the text file with ".html" extension .
example if you have file with name index then save it as index.html

<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<svg width="600" height="600">
    <circle cx="300" cy="300" r="5" fill="blue">
    <animate attributeName="r" from="5" to="215" dur="6s" repeatCount="30000">
    </circle>
    <circle cx="300" cy="300" r="3" fill="red">
    <animate attributeName="r" from="3" to="175" dur="6s" repeatCount="30000" >
    </circle>
    <circle cx="300" cy="300" r="2" fill="orange">
    <animate attributeName="r" from="2" to="145" dur="6s" repeatCount="30000">
    </circle>
<circle cx="300" cy="300" r="1" fill="pink">
    <animate attributeName="r" from="2" to="110" dur="6s" repeatCount="30000">
    </circle>
    
    
    <circle cx="300" cy="300" r="5" fill="gray">
    <animate attributeName="r" from="5" to="215" dur="3s" repeatCount="30000">
    </circle>
    <circle cx="300" cy="300" r="3" fill="red">
    <animate attributeName="r" from="3" to="175" dur="3s" repeatCount="30000" >
    </circle>
    <circle cx="300" cy="300" r="5" fill="orange">
    <animate attributeName="r" from="1" to="145" dur="3s" repeatCount="30000">
    </circle>
    <circle cx="300" cy="300" r="1" fill="yellow" >
    <animate attributeName="r" from="1" to="110" dur="3s"
    repeatCount="30000"
    
    >
    
    </circle>
    
</svg>

Check my blog for more animation and you can easily get html code of animation for free.

Animated circle with the help of html and css

Animated five circle and each circle has five another circle with same centre and all are animated in same sequence.&nbsp

You can use the following code to make the above animation. The animation is created by html5 and inline css.

<svg height="600" width="600">

<circle cx="300" cy="300" fill="orange" r="3">
                <animate attributename="r" dur="5" from="3" repeatcount="100" to="300">
          </animate></circle>
    
    <circle cx="300" cy="300" fill="yellow" r="1">
                <animate attributename="r" dur="5" from="1" repeatcount="100" to="300">
          </animate></circle>
    
             <circle cx="150" cy="150" r="10">
                <animate attributename="r" dur="5" from="10" repeatcount="100" to="200">
          </animate></circle>
    
    
    
             <circle cx="450" cy="150" r="10">
                <animate attributename="r" dur="5" from="10" repeatcount="100" to="190">
          </animate></circle>
    
    
    
             <circle cx="150" cy="450" r="10">
                <animate attributename="r" dur="5" from="10" repeatcount="100" to="190">
          </animate></circle>
    
    
    
             <circle cx="300" cy="300" r="10">
                <animate attributename="r" dur="5" from="10" repeatcount="100" to="190">
          </animate></circle>
    
    
             <circle cx="450" cy="450" r="10">
                <animate attributename="r" dur="5" from="10" repeatcount="100" to="190">
          </animate></circle>
    
    
    
        <circle cx="150" cy="150" fill="red" r="7">
                <animate attributename="r" dur="5" from="7" repeatcount="100" to="150">
          </animate></circle>
    
    
    <circle cx="450" cy="150" fill="red" r="7">
                <animate attributename="r" dur="5" from="7" repeatcount="100" to="150">
          </animate></circle>
    
    
    <circle cx="150" cy="450" fill="red" r="7">
                <animate attributename="r" dur="5" from="7" repeatcount="100" to="150">
          </animate></circle>
    
    
    <circle cx="450" cy="450" fill="red" r="7">
                <animate attributename="r" dur="5" from="7" repeatcount="100" to="150">
          </animate></circle>

<circle cx="300" cy="300" fill="red" r="7">
                <animate attributename="r" dur="5" from="7" repeatcount="100" to="150">
          </animate></circle>

<circle cx="150" cy="150" fill="green" r="5">
                <animate attributename="r" dur="5" from="5" repeatcount="100" to="110">
          </animate></circle>
    
    
    <circle cx="450" cy="150" fill="green" r="5">
                <animate attributename="r" dur="5" from="5" repeatcount="100" to="110">
          </animate></circle>
    
    
    <circle cx="150" cy="450" fill="green" r="5">
                <animate attributename="r" dur="5" from="5" repeatcount="100" to="110">
          </animate></circle>
    
    
    
    <circle cx="450" cy="450" fill="green" r="5">
                <animate attributename="r" dur="5" from="5" repeatcount="100" to="110">
          </animate></circle>
    
    
    
    <circle cx="300" cy="300" fill="green" r="5">
                <animate attributename="r" dur="5" from="5" repeatcount="100" to="110">
          </animate></circle>

<circle cx="150" cy="150" fill="orange" r="3">
                <animate attributename="r" dur="5" from="3" repeatcount="100" to="70">
          </animate></circle>
    
    <circle cx="150" cy="150" fill="yellow" r="1">
                <animate attributename="r" dur="5" from="1" repeatcount="100" to="30">
          </animate></circle>
    
    
    
    
    <circle cx="450" cy="150" fill="orange" r="3">
                <animate attributename="r" dur="5" from="3" repeatcount="100" to="70">
          </animate></circle>
    
    <circle cx="450" cy="150" fill="yellow" r="1">
                <animate attributename="r" dur="5" from="1" repeatcount="100" to="30">
          </animate></circle>

<circle cx="150" cy="450" fill="orange" r="3">
                <animate attributename="r" dur="5" from="3" repeatcount="100" to="70">
          </animate></circle>
    
    <circle cx="150" cy="450" fill="yellow" r="1">
                <animate attributename="r" dur="5" from="1" repeatcount="100" to="30">
          </animate></circle>
    
    
    
    <circle cx="450" cy="450" fill="orange" r="3">
                <animate attributename="r" dur="5" from="3" repeatcount="100" to="70">
          </animate></circle>
    
    <circle cx="450" cy="450" fill="yellow" r="1">
                <animate attributename="r" dur="5" from="1" repeatcount="100" to="30">
          </animate></circle>
    
    
    
    <circle cx="300" cy="300" fill="orange" r="3">
                <animate attributename="r" dur="5" from="3" repeatcount="100" to="70">
          </animate></circle>
    
    <circle cx="300" cy="300" fill="yellow" r="1">
                <animate attributename="r" dur="5" from="1" repeatcount="100" to="70">
          </animate></circle>
</svg>

Subscribe to: Posts (Atom)