HTML, CSS, Javascript creating circles inside eachother

Question

I need to make circles inside each other with HTML, CSS and Javascript, with the possibilty of clicking on a button, which will automatically add another circle to it. The newly added circle will be the most outer one.

Any ideas of how I can do this?

Answer 1

For the circles, you need to set border-radius to a value big enough (usually, more than half of the biggest of width and height).

To add a bigger circle, you need to copy the previous circles, create another, bigger, one, and paste the copied circles inside it. This is a jQuery snippet, but you can use any framework, or even plain js:

var $container = $('#container'),
    $previous_circles = $container.html()

$container
  .html('<div class="circle bigger_circle"></div>')
  .find('.bigger_circle')
  .append($previous_circles)
  .end()