JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="200" height="500"></svg>

JavaScript

var svg = document.getElementsByTagName('svg')[0];
steps = 10;
stepX = 10;
stepY =  -10;
originX = 0;
originY = 0;

for (var i = 0; i < steps; i++) {
    var x = stepX * (i + 1);
    var y = stepY * (i + 1);

    //create circle
    var shape = document.createElementNS(
        "http://www.w3.org/2000/svg", "circle");
    shape.setAttributeNS(null, "cx", originX + x);
    shape.setAttributeNS(null, "cy", originY - y);
    shape.setAttributeNS(null, "r", 5);
    shape.setAttributeNS(null, "fill", "green");
    shape.setAttributeNS(null, "class", "draggable");
    shape.setAttributeNS(null, "order", i);
    shape.setAttributeNS(null, "id", i);
    shape.id="circle"+i;
    svg.appendChild(shape);

    shape.onmousedown = function(evt) {
        var evt = evt || window.event;
        ddData.element = evt.target || evt.srcElement;
        ddData.initialX = evt.clientX;
        ddData.initialY = evt.clientY;
        ddData.originalX = parseFloat(
            ddData.element.getAttributeNS(null, "cx"));
        ddData.originalY = parseFloat(
            ddData.element.getAttributeNS(null, "cy"));
        var order = parseInt(
            ddData.element.getAttributeNS(null, "order"));
        ddData.lineEnd = lines[order];
        ddData.lineStart = lines[order+1];

    };
    
    shape.onclick = function(){
       alert(this.id);
    };

}