HTML et SVG

<div id="vitAngZoneAnim" class="vitZoneAnim">

	<h4>Mouvement de rotation uniforme autour d'un axe fixe : trajectoire circulaire et vitesse angulaire</h4>

	<svg width="400" height="400" id="vitAngAnimSvg">

		<rect x="0" y="0" width="400" height="400" stroke-width="1" opacity="0.05" />
		<circle cx="200" cy="200" r="100" style="stroke:red;stroke-width:1;fill:none;" stroke-dasharray="2,5" />
		<line x1="200" y1="195" x2="200" y2="205" style="stroke:rgb(255,0,0);stroke-width:2" />
		<line x1="195" y1="200" x2="205" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
		<line x1="200" y1="90" x2="200" y2="310" style="stroke:rgb(255,0,0);stroke-width:2" stroke-dasharray="2,5" />
		<line x1="90" y1="200" x2="310" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" stroke-dasharray="2,5" />
		<circle id="AnimVitAng" cx="200" cy="100" r="10" stroke="red" stroke-width="1" fill="red" opacity="1.0">
			<animateTransform
				id="AnimVitAngParam"
				attributeName="transform"
				type="rotate"
				from="0 200 200"
				to="360 200 200"
				begin="0s"
				dur="5.0s"
				repeatCount="2"
				restart="whenNotActive"
			/>
		</circle>
	</svg>

	<div id="vitAngTabBord" class="vitTabBord">
								
		<div class="vitTabBord-Element">
			<label for="vitAngAnimReplay">Rejouer l'animation</label>
			<button id="vitAngAnimReplay" type="button" onclick="VitAngAnimReplay();">
				<i class="fas fa-redo"></i>
			</button>
		</div>

		<div class="vitTabBord-Element">
			<label for="vitAngTrajModif">Modifier la valeur de la trajectoire (angle en degré) :</label>
			<input type="number" id="vitAngTrajModif" value="360" min="1" max="360" onchange="VitAngAnimModifTraj();">
		</div>

		<div class="vitTabBord-Element">
			<label fo="vitAngDureModif">Modifier la durée mise pour effectuer la trajectoire (valeur en seconde) : </label>
			<input type="number" id="vitAngDureModif" value="5" min="1" onchange="VitAngAnimModifDure();">
		</div>

		<div class="vitTabBord-Element vitTabBord-data">
			<div id="vitAngTraj"></div>
			<div id="vitAngDure"></div>
			<div id="vitAngVale"></div>
		</div>

		<div class="vitTabBord-Element">

			<div>
				<span><i class="fas fa-code"> </i> Code source de cette animation sous licence </span>
				<a href="https://creativecommons.org/licenses/by-nc/4.0/deed.fr" target="_blank">
					<img src="wv_images/by-nc.eu.svg" width="75" height="25"></img>
				</a>
			</div>

			<div>
				<label for="vitAngAnimTelecharg"><i class="fas fa-code"></i> Télécharger le code source de cette animation</label>
				<button type="button">
					<a href="wv_telechargements/code_animVitAngSVG.rtf" download>
						<i class="fas fa-download"></i>
					</a>
				</button>

			</div>
		</div>

	/div><!-- /vitAngTabBord -->

</div><!-- /vitAngZoneAnim →

JAVASCRIPT

function VitAngAnimReplay() {
	document.getElementById("AnimVitAngParam").beginElement();
	VitAngAnimMajAffichParam();
}

function VitAngAnimModifTraj() {
	var val = document.getElementById('vitAngTrajModif').value;
	document.getElementById("AnimVitAngParam").setAttribute("to",val+" 200 200");
	document.getElementById("AnimVitAngParam").beginElement();
	VitAngAnimMajAffichParam();
}

function VitAngAnimModifDure() {
	var val = document.getElementById('vitAngDureModif').value;
	document.getElementById("AnimVitAngParam").setAttribute("dur",val+"s");
	document.getElementById("AnimVitAngParam").beginElement();
	VitAngAnimMajAffichParam();
}

function VitAngAnimMajAffichParam() {
	var To = document.getElementById("AnimVitAngParam").getAttribute("to");
	var vitAngTrajDeg = To.split(" ");
	var vitAngTrajRad = (2*Math.PI*parseInt(vitAngTrajDeg[0])/360);
	document.getElementById("vitAngTraj").innerHTML="Trajectoire réalisée : "+vitAngTrajDeg[0]+" degré(s), soit "+(Math.round(vitAngTrajRad * 100)/100)+" rad (radians)";
	var vitAngDure = document.getElementById("AnimVitAngParam").getAttribute("dur");
	vitAngDure=vitAngDure.substring(0, (vitAngDure.length) -1);
	vitAngDure=parseInt(vitAngDure);
	document.getElementById("vitAngDure").innerHTML="Cette trajectoire a été parcourue en : "+vitAngDure+" s";
	document.getElementById("vitAngVale").innerHTML="La vitesse angulaire de l'objet en mouvement est donc de : "+Math.round((vitAngTrajRad / vitAngDure)*100)/100+" rad.s<sup>-1</sup>";
}

CSS

#vitMoyAnimReplay:hover, #vitAngAnimReplay:hover {
	cursor : pointer;
}

.vitZoneAnim {
	width:100%;
}

.vitTabBord {
	margin-left:51%;
	padding:5px;
}

.vitTabBord-Element input {
	width:10%;
}

.vitTabBord-data {
	color : blue;				
	background-color : #dddddd;
	margin-top : 5px;			
	margin-bottom : 5px;
	padding : 5px;
}