Creating Concentric Circles with JavaScript/jQuery

Question

I am trying to generate 10 concentric circles from one object with jQuery using a for loop.

I've written this in my jsfiddle http://jsfiddle.net/JoshuaWaheed/NJkda/2/, which looks like this:

<div class="circle"></div>

for(var count = 0; count < 20; count++){
  var ten = 10;
  ten = ten + 30;
  $(".circle").css({"width":ten+"px","height":ten+"px"});
};

How can I make this right? It seems to increase in width and height when I add the variable by any number such as 30 but doesn't bring out the result that it should.

perhaps making it sleep... or deferring a little somehow is what you need... most likely it just goes too quickly to the last one. I mean, one div, one css {width + height} = one circle, right? — d'alar'cop, Sep 08 '13 at 17:26
I am not sure what you are trying to do. Can you explain it a little bit more? — putvande, Sep 08 '13 at 17:27
I'm trying to create a circles within or around circles, which results with 10 circular shapes. From Plato's comment, I'm getting the feeling that I might need to recreate the object with javascript 10 times but at a larger size. I'll try that and will see. — Joshua Waheed, Sep 08 '13 at 17:35

score 3 · Accepted Answer · answered Sep 08 '13 at 17:29

You need to define the ten variable outside the loop and create a new element for each ring.

For example,

var ten = 10;
var tgt = $('body');
for(var count = 0; count < 20; count++){
    ten += 30;
    tgt.append('<div class="circle" style="width:'+ten+'px;height:'+ten+'px;margin:-'+(ten/2)+'px 0 0 -'+(ten/2)+'px"></div>');
};

Notice that I also define the margin inside the javascript, since it also needs to change.

Your CSS needs a small change too;

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 3px solid #666666;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

I have set the border radius to 100% instead of a pixel value, and removed the margin and width/height, which is unnecessary.

That makes perfect sense. Thanks a lot :) – Joshua Waheed Sep 08 '13 at 17:37 — Joshua Waheed, Sep 08 '13 at 17:37

score 3 · Answer 2 · answered Sep 08 '13 at 17:36

First, move the variable declaration outside the loop. Second, set the border-radius value to 50%. Last, create a new element for every circle. Your code revisited:

/** 
 * css radius:
 *  -webkit-border-radius: 50%;
 *  -moz-border-radius: 50%;
 *  border-radius: 50%;
 */
var ten = 10;
for(var count = 0; count < 20; count++){
   ten = ten + 10;
   var c = $('<div class="circle"></div>').appendTo('body');
   c.css({"width":ten+"px","height":ten+"px"});
};

Modified jsFiddle

Plato · Answer 3 · 2013-09-08T17:36:36.933

First off you are modifying your only existing circle repeatedly once per for loop.

Second, every iteration you are setting the height and width to 40px.

Third, you may want to use SVG graphics which offer native support for stuff like this. Here is an example with SVG:

http://jsfiddle.net/5c6zy/1/

//HTML
<svg id='circles' xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>

//Javascript
var centerX = 250;
var centerY = 250;

for(var count = 0; count < 20; count++){
    var radius = count * 10;
    makeAndPlaceCircle(radius);
};

function makeAndPlaceCircle(r){
  // thx m93a: http://stackoverflow.com/a/16489845/1380669
  var circles = document.getElementById('circles'); //Get svg element
  var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); 
  newElement.setAttribute("cx", centerX);
  newElement.setAttribute("cy", centerY);
  newElement.setAttribute("r", r);
  newElement.style.stroke = "#000"; //Set stroke colour
  newElement.style.strokeWidth = "2px"; //Set stroke width
  newElement.style.fill = "none"; //Set stroke colour
  circles.appendChild(newElement);
};

//No CSS required, but you can define CSS classes and set them on the SVG circle elements, if you would like to e.g. change stroke, fill

Thanks, I was silly not to realise I need to recreate the objects. I'll have a look into SVG :) — Joshua Waheed, Sep 08 '13 at 17:38
*a)* modern browser SVG support is good (but not universal esp. IE <= 8 and android 2.x) see http://caniuse.com/svg *b)* as I understand it, the `document.createElementNS` is necessary because SVG elements have to set a namespace to tell the browser they should be treated as svg elements, instead of a normal html element that happens to have the unusual name ``. *c)* this is the resource I used to pick up SVG, while exploring the data visualization library d3.js: http://alignedleft.com/tutorials/d3/an-svg-primer/ — Plato, Sep 08 '13 at 17:43
SVG looks amazing. gonna look into more of the path element. Thanks for this. It's too bad IE8 and below doesn't support it. — Joshua Waheed, Sep 08 '13 at 18:39

score 2 · Answer 4 · answered Sep 08 '13 at 18:11

2

My example ma be interesting http://jsfiddle.net/gxM84/2/

var n=5; //set number of circles

increasing radius here

padding: 15px;

answered Sep 08 '13 at 18:11

Serg

1,347
1
8
15

That's neat. From what I can understand, each time an object is created, it is nested inside the previously created element, pushing it out by 15 pixels with the padding. And with id5 we determine the full size of the pattern. Thanks a lot for this :D – Joshua Waheed Sep 08 '13 at 18:55
You are right. 1. objects are nested; 2. pushing it out by pixels that are set at the padding in CSS 3. (not full size) you should set the size of smallest circle 4. you can set the number of circles – Serg Sep 09 '13 at 07:12

Creating Concentric Circles with JavaScript/jQuery

4 Answers4