jQuery: drawing lines and geometries

In this post I'm going to show you how to dynamically draw lines that will form a complete geometric figure once the process is complete. We'll create a simple square starting from the top side and then drawing each side clockwise. To accomplish this task, we'll use four nested timers using the setInterval() function. First of all, however, we need to build our basic markup structure which is as follows:

<div id="square">

 <div id="top"></div>
 <div id="right"></div>
 <div id="bottom"></div>
 <div id="left"></div>

</div>

We'll use CSS absolute positioning to exactly put every single side in place:

#square {
 width: 200px;
 height: 200px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -100px 0 0 -100px;
}

#top {
 position: absolute;
 top: 0;
 left: 0;
 width: 0px; /* width: 200 height: 2 */
 height: 0px;
 background: black;
}

#right {
 position: absolute;
 top: 0;
 right: 0;
 width: 0px; /* width: 2 height: 200 */
 height: 0px;
 background: black;
}

#bottom {
 position: absolute;
 bottom: 0;
 right: 0;
 width: 0px;  /* width: 200 height: 2 */
 height: 0px;
 background: black;
}

#left {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0px; /* width: 2 height: 200 */
 height: 0px;
 background: black;
}

As you can see, the widths and heights have been zeroed by default so that we can increment them using our timers. In turn, our timers we'll need four different counters to properly increment each style property. Here's the jQuery code:

$(document).ready(function() {

    var counter1 = 0;
    var counter2 = 0;
    var counter3 = 0;
    var counter4 = 0;
    
    var interval1 = window.setInterval(function() {
    
    
      counter1 += 1;
      
      $('#top').css({height: '2px', width: counter1});
      
      if(counter1 == 200) {
      
        window.clearInterval(interval1);
        
        var interval2 = window.setInterval(function() {
        
          counter2 += 1;
          
          $('#right').css({width: '2px', height: counter2});
          
          if(counter2 == 200) {
          
            window.clearInterval(interval2);
            
            var interval3 = window.setInterval(function() {
            
            
              counter3 += 1;
              
              $('#bottom').css({height: '2px', width: counter3});
              
              if(counter3 == 200) {
              
                window.clearInterval(interval3);
                
                var interval4 = window.setInterval(function() {
                
                
                
                  counter4 += 1;
                  
                  $('#left').css({width: '2px', height: counter4});
                  
                  if(counter4 == 200) {
                  
                    window.clearInterval(interval4);
                    
                    $('#square').css('background', 'yellow');
                  
                  }
                
                
                
                
                }, 50);
              
              
              }
            
            
            }, 50);
          
          }
          
        
        }, 50);
      
      }
    
    
    }, 50);

});

Each timer will stop only when it has reached 200 as its value. When a timer stops, the next starts and so on, until the whole square is complete. You can see the demo below.

Demo

Live demo