JSFiddle - React, Tailwind, and code Playground

by chrisloughnane

HTML

<h1>My first SVG for loop</h1>

JavaScript

var circlex = 50;
  var circley = 50;

  var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
  for (var i = 0; i < 100; i++) {
    circlex = circlex + 1;
    circley = circley + 1;

    var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
    circle.setAttribute("cx", circlex);
    circle.setAttribute("cy", circley);
    circle.setAttribute("r", "40");
    circle.setAttribute("stroke", "green");
    circle.setAttribute("strokeWidth", 4);
    circle.setAttribute("fill", "red");
    svg.appendChild(circle);
  };
  document.body.appendChild(svg);