JSFiddle - React, Tailwind, and code Playground
HTML
<svg id="svg" width="100%" height="800">
</svg>
JavaScript
var cont = 0;
function horloge_dynamique(x, y, diametre, decalage) {
var myCont = cont;
var svg = document.getElementById('svg');
cont++;
//cree circle
var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
newCircle.setAttributeNS(null, 'id', 'circle' + myCont);
newCircle.setAttributeNS(null,'stroke-width', 2);
newCircle.setAttributeNS(null,'stroke', 'black');
newCircle.setAttributeNS(null,'fill', 'Aqua');
svg.appendChild(newCircle);
//cree aiguille heure
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttributeNS(null, 'id', 'heure' + myCont);
newLine.setAttributeNS(null, "stroke", "red");
newLine.setAttributeNS(null, "stroke-width", "4");
svg.appendChild(newLine);
//cree aiguille minute
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttributeNS(null, 'id', 'min' + myCont);
newLine.setAttributeNS(null, "stroke", "orange");
newLine.setAttributeNS(null, "stroke-width", "2");
svg.appendChild(newLine);
//cree aiguille seconde
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttributeNS(null, 'id', 'sec' + myCont);
newLine.setAttributeNS(null, "stroke", "black");
newLine.setAttributeNS(null, "stroke-width", "1");
svg.appendChild(newLine);
//var circle = document.getElementById("circle_horloge");
var circle = document.getElementById("circle" + myCont);
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", diametre);
//heure
//var aiguille_heure = document.getElementById("heure");
var aiguille_heure = document.getElementById("heure" + myCont);
aiguille_heure.setAttribute("x1", x);
aiguille_heure.setAttribute("y1", y);
aiguille_heure.setAttribute("x2", x);
aiguille_heure.setAttribute("y2", (y - diametre) + diametre / 3);
...