SodhanaLibrary

If you want draw a circle then you can use Html-5 Canvas programming or raphael.js or paper.js. But if you want place elements in a Circle then you have to generate coordinates for the Circle. In this article I am going to draw circle with Midpoint Circle algorithm. Find more about Midpoint circle algorithm at http://en.wikipedia.org/wiki/Midpoint_circle_algorithm

DEMO - Circle with jQuery

CSS :

#circle {
  position:relative;
  margin:auto;
  width:400px;
  height:400px;
  vertical-align:center;
}

#circle b {
  position:absolute;
  color:rgb(91,111,135);
}

jQuery :

x0, y0 : Center of the Circle

radius : Radius of the  Circle

radiusError : This is to calculate value for X - Coordinate.

x, y : Variables to calculate Coordinates.

  var x0=200,y0=200;
  var radius=200;
  var x = radius, y = 0;
  var radiusError = 1-x;
 
  while(x >= y)
  {
    drawPixel(x + x0, y + y0);
    drawPixel(y + x0, x + y0);
    drawPixel(-x + x0, y + y0);
    drawPixel(-y + x0, x + y0);
    drawPixel(-x + x0, -y + y0);
    drawPixel(-y + x0, -x + y0);
    drawPixel(x + x0, -y + y0);
    drawPixel(y + x0, -x + y0);
 
    y++;
    if(radiusError<0)
        radiusError+=2*y+1;
    else
        {
        x--;
        radiusError+=2*(y-x+1);
    }
  }
  
  function drawPixel(mx,my) {
    $("#circle").append("<b style='left:"+mx+"px;top:"+my+"px'>.</b>");
  }