Draw SVG Circle through java script one By one

Question

I want to draw SVG circle animation one after another I have done this by using hard-coded ID but I want to make it dynamic. We can use this by class or we can do this by an increment of id. Also, remember I have to do this thing without jQuery.

var circle = document.getElementById('C1');
    var radius = circle.getAttribute("r");
    var circleLength = 2 * Math.PI * radius;
    circle.style.strokeDasharray = circleLength;
    circle.style.strokeDashoffset = circleLength;
    

    var circle2 = document.getElementById('C2');
    circle2.style.opacity = 0;
    var radius2 = circle2.getAttribute("r");
    var circleLength2 = 2 * Math.PI * radius2;
    circle2.style.strokeDasharray = circleLength2;
    circle2.style.strokeDashoffset = circleLength2;
    
    
    var circle3 = document.getElementById('C3');
    circle3.style.opacity = 0;
    var radius3 = circle3.getAttribute("r");
    var circleLength3 = 2 * Math.PI * radius3;
    circle3.style.strokeDasharray = circleLength3;
    circle3.style.strokeDashoffset = circleLength3;       


    circle.addEventListener("animationend", myFunction);
    function myFunction() {
        circle2.style.opacity = 1;
        circle2.style.animationDelay = '3s';
    }
    
    
    circle2.addEventListener("animationend", myFunction2);
    function myFunction2() {
        circle3.style.opacity = 1;
        circle3.style.animationDelay = '6s';
    }

.circle {
        animation: dash 3s linear forwards;
    }
    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

`

Owais Aslam · Accepted Answer

I think you want your code in the loop to remove repeated code. I wrapped it as much as I could.

  var circle = []; var circleLength = []; var radius = [];
  for (i = 1; i < 4; i++){
   circle[i] = document.getElementById('C'+i);
   if(i>1){
	 circle[i].style.opacity = 0;
   }
   radius[i] = circle[i].getAttribute("r");
   circleLength[i] = 2 * Math.PI * radius[i];
   circle[i].style.strokeDasharray = circleLength[i];
   circle[i].style.strokeDashoffset = circleLength[i];
      if(i==3){
       circle[1].addEventListener("animationend", function(){
        myFunction(2,3);
        }, false);
       circle[2].addEventListener("animationend", function(){
        myFunction(3,6);
        }, false);
      }
   }
   function myFunction(index, sec) {
     circle[index].style.opacity = 1;
     circle[index].style.animationDelay = sec+'s';
   }

    .circle {
        animation: dash 3s linear forwards;
    }
    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

Draw SVG Circle through java script one By one

Answers (1)

Related Questions