JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

/*
.circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	border: 3px solid #666666;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
    margin: -10px 0 0 -10px;
}
*/

JavaScript

var centerX = 250;
var centerY = 250;

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

function makeAndPlaceCircle(r){
  // thx m93a: http://stackoverflow.com/a/16489845/1380669
  var svg = 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
  svg.appendChild(newElement);
};