JSFiddle - React, Tailwind, and code Playground

HTML

<label for="nbdisques">Entrez le nombre de disques : </label>
<input type="number" value="4" step="1" min="1" id="nbdisques">
<br>
<label for="angle">Entrez l'angle de rotation : </label>
<input type="number" value="15" step="1" min="1" id="angle">
 

<div id="zoneFig"></div>

JavaScript

var nbdisquesinput = document.getElementById("nbdisques");
var angleinput = document.getElementById("angle"); 


// segment [AB] de la figure (corde du cercle) :
var Ax = 10, Ay = 10, Bx = 10, By = 40;
//rayon du cercle : 
var rayon = 20; 
// coordonnées du centre du disque 
// point à une distance 20 de A et se trouvant sur la médiatrice de [AB] : 
var centrex = 10 + Math.sqrt(175), centrey = 25; 

let zoneFig = document.getElementById("zoneFig");

// on crée un élément svg dans l'élément div d'identifiant zoneFig :
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", 800 +'px');
svg.setAttribute("height", 300 +'px');
svg.setAttribute("viewBox", "0 0 800 300");
zoneFig.appendChild(svg);


function disque(angle, nb){
	
	let disques = document.getElementsByTagNameNS("http://www.w3.org/2000/svg", "path");
	for(let k = 0; k < disques.length; k++){
		let disque = disques[k];
		disque.parentNode.removeChild(disque);
	}
	for(let k = 0; k < nb; k++)
	{
	let disquetronque = document.createElementNS("http://www.w3.org/2000/svg", "path");
	disquetronque.setAttribute("d", 'M' + Ax + ' ' + Ay + 'A' + rayon + ' ' + rayon + ' 0 1 1 ' +  Bx  + ' ' + By + ' ' +'Z');
	disquetronque.setAttribute("style", "stroke:orange;fill:yellow;stroke-width:3px;");
	disquetronque.setAttribute('transform', "translate(" + (k*2.5*rayon) + "," + "0) rotate(" + (k*angle) + "," + centrex + "," + centrey +")" );
	svg.appendChild(disquetronque);
	}
}

 


nbdisquesinput.addEventListener('change', function(){disque(angleinput.value, nbdisquesinput.value)}, false);
angleinput.addEventListener('change', function(){disque(angleinput.value, nbdisquesinput.value)}, false);