JavaScript Circle Animation

This code snippet helps you to create a circle animation. It define two functions, “jonu” and “jon”. “jonu” takes a parameter “x” and sets the radius attribute of an HTML element with the ID “hel” to “x”. If “x” is less than or equal to 0 or less than 40, the function increments “x” by 1 and calls itself using setTimeout to run after 15 milliseconds. “jon” also takes a parameter “l” and sets the radius attribute of the “hel” element to “l”. If “l” is between 10 and 40, the function decrements “l” by 1 and calls itself using setTimeout to run after 15 milliseconds. The functions are likely used for some kind of animation or effect on the “hel” element, causing it to grow and then shrink in radius over time.

How to Create JavaScript Circle Animation

Create the HTML structure for the circle animation as follows:

<div class="hoty"><svg id="nitin" height="100" width="100">
  <circle cx="50" cy="50" r="10" stroke="orange" stroke-width="3" fill="white" id="hel"  onmouseover="jonu(10)"  onmouseout="jon(39)" />
  Sorry, your browser does not support inline SVG.  
</svg> </div><button onclick="jonu(10)">start</button>

Now, style the circle animation using the following CSS styles:

.hoty{
   width:100px;
   height:100px;  
}
.cd__main{
display: block !important;
}

Finally, add the following JavaScript function for its functionality:

function jonu(x){
document.getElementById('hel').setAttribute("r", x);
  if(x==0||x<40){
  x=x+1;
  var a=setTimeout('jonu('+x+')',15) ;   
  }

}
function jon(l){
 document.getElementById('hel').setAttribute("r", l);
   if(l<40 && l>10){
      l=l-1;
      var a=setTimeout('jon('+l+')',15) ; 
   }
   
}

That’s all! hopefully, you have successfully created the JavaScript circle animation. If you have any questions or suggestions, feel free to comment below.