mobile immobile

Un carré aux bordures bicolores

Écrire un code svg permettant d'obtenir une figure telle que la suivante :

Aide

Une idée : créer en premier lieu deux triangles qui seront ensuite masqués par le carré. Seuls les bords des triangles apparaîtront encore, ce qui donne l'impression d'une bordure pour le carré.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> bordure bicolore </title>
        
		 
    </head>
    <body>
 


<svg>
<polygon points="8 8, 52 52, 8 52"/>
<polygon points="8 8, 52 52, 52 8" fill="yellow"/>
<rect x="10" y="10" width="40" height="40" fill="magenta"/>
</svg>
 
    </body>
</html>

Une bestiole carrée

Ajoutez deux yeux à notre carré :

une aide

Relisez le cours sur les ellipses si nécessaire et les pages sur translations et rotations.

code svg

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> lutin au carré </title>
        
		 
    </head>
    <body>
 

<svg>
<polygon points="8 8, 52 52, 8 52"/>
<polygon points="8 8, 52 52, 52 8" fill="yellow"/>
<rect x="10" y="10" width="40" height="40" fill="magenta"/>
<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />
<use xlink:href="#oeil1" transform="translate(5,5)" />
</svg>
 
    </body>
</html>

Le lutin sur un manège

Codez :

une aide

Vous pouvez à nouveau utiliser translation et rotation.

En utilisant la balise <defs> </defs>, vous pouvez utiliser le code précédent du lutin tel quel sans qu'il soit dessiné. Puis utiliser la balise use pour lui faire subir les translation et rotation désirées.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> manège pour lutin carré </title>
        
		 
    </head>
    <body>
 

<svg width="600" height="600">
<circle cx="300" cy="300" r="300" fill="#aa3939" />

<defs>
<g id="figurebase">
<polygon points="8 8, 52 52, 8 52" fill="#550000"/>
<polygon points="8 8, 52 52, 52 8" fill="#ffaaaa"/>
<rect x="10" y="10" width="40" height="40" fill="#801515"/>
<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />
<use xlink:href="#oeil1" transform="translate(5,5)" />
</g>
</defs>

<line x1="0" y1="300" x2="600" y2="300" style="stroke:black; stroke-width:1;" />
<circle cx="300" cy="300" r="10" fill="black" />

<use xlink:href="#figurebase" transform="translate(5,270) rotate(-45, 30, 30)" /> 
</svg>
 
    </body>
</html>

Le succès du manège

Le bouche à oreille a fait son effet : le manège est maintenant rempli.

Codez :

une aide

Gérez la partie répétitive avec javascript.

code (texte du code généré par js)

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 

<svg width="600" height="600" id="zonefigure"></svg>

<script>
var nbtour = 24;
var chaine = '';

//disque de fond
chaine += '<circle cx="300" cy="300" r="300" fill="#aa3939" />';

// le modèle du lutin
chaine += '<defs>';
chaine += '<g id="figurebase">';
chaine += '<polygon points="8 8, 52 52, 8 52" fill="#550000"/>';
chaine += '<polygon points="8 8, 52 52, 52 8" fill="#ffaaaa"/>';
chaine += '<rect x="10" y="10" width="40" height="40" fill="#801515"/>';
chaine += '<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />';
chaine += '<use xlink:href="#oeil1" transform="translate(5,5)" />';
chaine += '</g>';
chaine += '</defs>';

// création des lutins sur le manège
chaine += '<use xlink:href="#figurebase" id="carre1" transform="translate(5,270) rotate(-45, 30, 30)" /> ';
for(let i = 0; i <  nbtour; i++) {
	chaine += '<use xlink:href="#carre1" transform="rotate(' + (15*i) + ', 300, 300)" /> ';
}

// mise en place du code dans l'élément svg :
document.getElementById("zonefigure").innerHTML = chaine;
</script>
 
</body>
</html>

js et appendChild

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 
  
<svg width="600" height="600" id="zoneFigure">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>
	
<!-- le disque du manège : -->
<circle cx="300" cy="300" r="300" fill="url(#couleurDisqueManege)" />


<!--  définition du lutin : -->
<defs>
<g id="lutin">
<g transform="translate(5,270) rotate(-45, 30, 30)">
<polygon points="8 8, 52 52, 8 52" fill="#000000"/>
<polygon points="8 8, 52 52, 52 8" fill="#ffffff"/>
<rect x="10" y="10" width="40" height="40" fill="#d46a6a"/>
<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />
<use xlink:href="#oeil1" transform="translate(5,5)" />
</g>
</g>
</defs>
 
</svg>
 

<script>
 
const svg =  document.getElementById("zoneFigure");

let lutin;


for(let k = 0; k < 25; k++){ 
	lutin = document.createElementNS("http://www.w3.org/2000/svg", "use");
	lutin.setAttributeNS(
			'http://www.w3.org/1999/xlink', // xlink NS URI
			'href',                         // attribute (no 'xlink:')
			'#lutin');  
	lutin.setAttribute("transform", " rotate(" + (k*15) + ",300, 300) ");
svg.appendChild(lutin);
}
 
</script>
 
 
</body>
</html>

Le succès du manège, bis

Pour améliorer la rentabilité du manège, on crée maintenant une deuxième rangée.

Codez :

une aide

Plutôt que de créer à nouveau chaque lutin, ajoutez une balise groupe autour du code définissant la première rangée.

Il faut ensuite faire subir un "changement d'échelle autour du point centre du grand disque" (on parle en mathématiques d'homothétie).

Pour un tel changement d'échelle autour d'un point, vous pouvez consulter cette page.

texte du code svg créé avec js

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 

<svg width="600" height="600" id="zonefigure"></svg>

<script>
var nbtour = 24;
var chaine = '';

//disque de fond
chaine += '<circle cx="300" cy="300" r="300" fill="#aa3939" />';

// le modèle du lutin
chaine += '<defs>';
chaine += '<g id="figurebase">';
chaine += '<polygon points="8 8, 52 52, 8 52" fill="#550000"/>';
chaine += '<polygon points="8 8, 52 52, 52 8" fill="#ffaaaa"/>';
chaine += '<rect x="10" y="10" width="40" height="40" fill="#801515"/>';
chaine += '<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />';
chaine += '<use xlink:href="#oeil1" transform="translate(5,5)" />';
chaine += '</g>';
chaine += '</defs>';


// première rangée de lutins
// on ajoute une balise de groupe autour de cette rangée :
chaine += '<g id="tour1">';
chaine += '<use xlink:href="#figurebase" id="carre1" transform="translate(5,270) rotate(-45, 30, 30)" /> ';
for(let i = 0; i <  nbtour; i++) {
	chaine += '<use xlink:href="#carre1" transform="rotate(' + (15*i) + ', 300, 300)" /> ';
}
chaine += '</g>';// fin du groupe première rangée de lutins

// création de la seconde rangée 
//  le couple (60,60) dans translate est obtenu par l'opération (300 * (1-0.8), 300 * (1-0.8) )
// conformément à l'indication donnée plus haut
chaine += '<use xlink:href="#tour1" transform="translate(60,60) scale(0.8) rotate(7.5, 300, 300)" />';
 
// le code est placé dans l'élément svg d'identifiant zonefigure :
document.getElementById("zonefigure").innerHTML = chaine;
</script>

 
</body>
</html>

js et appendChild

On commence dans cette version à créer un lutin de taille plus petite :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 

<svg width="600" height="600" id="zoneFigure">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>
	
<!-- le disque du manège : -->
<circle cx="300" cy="300" r="300" fill="url(#couleurDisqueManege)" />


<!--  définition du lutin : -->
<defs>
<g id="lutin">
<g transform="translate(5,270) rotate(-45, 30, 30)">
<polygon points="8 8, 52 52, 8 52" fill="#000000"/>
<polygon points="8 8, 52 52, 52 8" fill="#ffffff"/>
<rect x="10" y="10" width="40" height="40" fill="#d46a6a"/>
<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />
<use xlink:href="#oeil1" transform="translate(5,5)" />
</g>
</g>
</defs>



<!--  définition d'un lutin un peu plus petit : -->
<defs>
<g id="lutinMoyen">
<g transform="translate(80,270) rotate(-45, 30, 30)">
<g transform="scale(0.8)">
<polygon points="8 8, 52 52, 8 52" fill="#000000"/>
<polygon points="8 8, 52 52, 52 8" fill="#ffffff"/>
<rect x="10" y="10" width="40" height="40" fill="#d46a6a"/>
<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />
<use xlink:href="#oeil1" transform="translate(5,5)" />
</g>
</g>
</g>
</defs>


<use xlink:href="#lutinMoyen" />
</svg>
 

<script>
	
const svg =  document.getElementById("zoneFigure");

let lutin;


for(let k = 0; k < 25; k++){ 
	lutin = document.createElementNS("http://www.w3.org/2000/svg", "use");
	lutin.setAttributeNS(
			'http://www.w3.org/1999/xlink', // xlink NS URI
			'href',                         // attribute (no 'xlink:')
			'#lutin');  
	lutin.setAttribute("transform", " rotate(" + (k*15) + ",300, 300) ");
svg.appendChild(lutin);
}
 
</script>


 
</body>
</html>

On lui fait ensuite subir la même rotation que le précédent :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 

<svg width="600" height="600" id="zoneFigure">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>
	
<!-- le disque du manège : -->
<circle cx="300" cy="300" r="300" fill="url(#couleurDisqueManege)" />


<!--  définition du lutin : -->
<defs>
<g id="lutin">
<g transform="translate(5,270) rotate(-45, 30, 30)">
	<g id="definitionLutin">
	<polygon points="8 8, 52 52, 8 52" fill="#000000"/>
	<polygon points="8 8, 52 52, 52 8" fill="#ffffff"/>
	<rect x="10" y="10" width="40" height="40" fill="#d46a6a"/>
	<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />
	<use xlink:href="#oeil1" transform="translate(5,5)" />
	</g>
</g>
</g>
</defs>



<!--  définition d'un lutin moyen : -->
<defs>
<g id="lutinMoyen">
<g transform="translate(75,0)">
	<g transform="translate(5,270) rotate(-45, 30, 30)">
	<use xlink:href="#definitionLutin" transform="scale(0.8)"/>
	</g>
</g>
</g>
</defs>





  
</svg>
 

<script>
	
const svg =  document.getElementById("zoneFigure");

let lutin;


for(let k = 0; k < 25; k++){ 
	lutin = document.createElementNS("http://www.w3.org/2000/svg", "use");
	lutin.setAttributeNS(
			'http://www.w3.org/1999/xlink', // xlink NS URI
			'href',                         // attribute (no 'xlink:')
			'#lutin');  
	lutin.setAttribute("transform", " rotate(" + (k*15) + ",300, 300) ");
svg.appendChild(lutin);
}


for(let k = 0; k < 25; k++){ 
	lutin = document.createElementNS("http://www.w3.org/2000/svg", "use");
	lutin.setAttributeNS(
			'http://www.w3.org/1999/xlink', // xlink NS URI
			'href',                         // attribute (no 'xlink:')
			'#lutinMoyen');  
	lutin.setAttribute("transform", " rotate(" + (7+k*15) + ",300, 300) ");
svg.appendChild(lutin);
}
 
 
</script>


 
</body>
</html>

Le succès du manège, ter

L'industrie du divertissement n'ayant aucun scrupule... on ajoute une troisème rangée !

Codez :

une aide

On peut passer de la rangée 2 à la rangée 3 comme on est passé de la 1 à la 2.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 
<svg width="600" height="600" id="zonefigure"></svg>

<script>
var nbtour = 24;
var chaine = '';

//disque de fond
chaine += '<circle cx="300" cy="300" r="300" fill="#aa3939" />';

// le modèle du lutin
chaine += '<defs>';
chaine += '<g id="figurebase">';
chaine += '<polygon points="8 8, 52 52, 8 52" fill="#550000"/>';
chaine += '<polygon points="8 8, 52 52, 52 8" fill="#ffaaaa"/>';
chaine += '<rect x="10" y="10" width="40" height="40" fill="#801515"/>';
chaine += '<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />';
chaine += '<use xlink:href="#oeil1" transform="translate(5,5)" />';
chaine += '</g>';
chaine += '</defs>';

// première rangée de lutins
chaine += '<g id="tour1">';
chaine += '<use xlink:href="#figurebase" id="carre1" transform="translate(5,270) rotate(-45, 30, 30)" /> ';
for(let i = 0; i <  nbtour; i++) {
	chaine += '<use xlink:href="#carre1" transform="rotate(' + (15*i) + ', 300, 300)" /> ';
}
chaine += '</g>';// fin du groupe première rangée de lutins

// création de la seconde rangée 
// on lui ajoute un identifiant  
chaine += '<use xlink:href="#tour1" id="tour2" transform="translate(60,60) scale(0.8) rotate(7.5, 300, 300)" />';
 
// création de la troisième rangée 
chaine += '<use xlink:href="#tour2" transform="translate(60,60) scale(0.8) rotate(7.5, 300, 300)" />';
 
// le code  est placé dans l'élément svg d'identifiant zonefigure :
document.getElementById("zonefigure").innerHTML = chaine;
</script>
 
</body>
</html>

un autre code

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 
<svg width="600" height="600" id="zoneFigure">
	
	
<!--  couleur du disque du manège : -->
<defs>
<radialGradient id="couleurDisqueManege">
<stop offset="0%" stop-color="rgb(107,142,35)"/>
<stop offset="100%" stop-color="rgb(173,245,47)"/>
</radialGradient>
</defs>
	
<!-- le disque du manège : -->
<circle cx="300" cy="300" r="300" fill="url(#couleurDisqueManege)" />


<!--  définition du lutin : -->
<defs>
<g id="lutin">
<g transform="translate(5,270) rotate(-45, 30, 30)">
	<g id="definitionLutin">
	<polygon points="8 8, 52 52, 8 52" fill="#000000"/>
	<polygon points="8 8, 52 52, 52 8" fill="#ffffff"/>
	<rect x="10" y="10" width="40" height="40" fill="#d46a6a"/>
	<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />
	<use xlink:href="#oeil1" transform="translate(5,5)" />
	</g>
</g>
</g>
</defs>



<!--  définition d'un lutin moyen : -->
<defs>
<g id="lutinMoyen">
<g transform="translate(65,0)">
	<g transform="translate(5,270) rotate(-45, 30, 30)">
	<use xlink:href="#definitionLutin" transform="scale(0.8)"/>
	</g>
</g>
</g>
</defs>



<!--  définition d'un lutin petit : -->
<defs>
<g id="lutinPetit">
<g transform="translate(120,0)">
	<g transform="translate(5,270) rotate(-45, 30, 30)">
	<use xlink:href="#definitionLutin" transform="scale(0.6)"/>
	</g>
</g>
</g>
</defs>

 <use xlink:href="#lutinPetit" />
</svg>
 

<script>
	
const svg =  document.getElementById("zoneFigure");

let lutin;


for(let k = 0; k < 25; k++){ 
	lutin = document.createElementNS("http://www.w3.org/2000/svg", "use");
	lutin.setAttributeNS(
			'http://www.w3.org/1999/xlink', // xlink NS URI
			'href',                         // attribute (no 'xlink:')
			'#lutin');  
	lutin.setAttribute("transform", " rotate(" + (k*15) + ",300, 300) ");
svg.appendChild(lutin);
}


for(let k = 0; k < 25; k++){ 
	lutin = document.createElementNS("http://www.w3.org/2000/svg", "use");
	lutin.setAttributeNS(
			'http://www.w3.org/1999/xlink', // xlink NS URI
			'href',                         // attribute (no 'xlink:')
			'#lutinMoyen');  
	lutin.setAttribute("transform", " rotate(" + (7+k*15) + ",300, 300) ");
svg.appendChild(lutin);
}



for(let k = 0; k < 25; k++){ 
	lutin = document.createElementNS("http://www.w3.org/2000/svg", "use");
	lutin.setAttributeNS(
			'http://www.w3.org/1999/xlink', // xlink NS URI
			'href',                         // attribute (no 'xlink:')
			'#lutinPetit');  
	lutin.setAttribute("transform", " rotate(" + (k*15) + ",300, 300) ");
svg.appendChild(lutin);
}
 
 
</script>
 
</body>
</html>

Le mobile immobile

On ajoute maintenant trois rangées, qui tournent en sens inverse.

Codez :

une aide

Englobez le code des trois premières rangées dans une balise g et utilisez à nouveau scale().

scale() peut prendre deux paramètres, le premier agissant sur les abscisses, le second sur les ordonnées. Vous pouvez consulter cette page.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		 
    </head>
<body>
 
<svg width="600" height="600" id="zonefigure"></svg>


<script>
var nbtour = 24;
var chaine = '';

//couleur du manège
chaine += '<defs>';
chaine += '<radialGradient id="couleurmanege">';
chaine += '<stop offset="0%" stop-color="rgb(107,142,35)"/>';
chaine += '<stop offset="100%" stop-color="rgb(173,245,47)"/>';
chaine += '</radialGradient>';
chaine += '</defs>';
 

//disque de fond
chaine += '<circle cx="300" cy="300" r="300" fill="url(#couleurmanege)" />';

// le modèle du lutin : 
chaine += '<defs>';
chaine += '<g id="figurebase">';
chaine += '<polygon points="8 8, 52 52, 8 52" fill="#000000"/>';
chaine += '<polygon points="8 8, 52 52, 52 8" fill="#ffffff"/>';
chaine += '<rect x="12" y="12" width="37" height="37" fill="#d46a6a"/>';
chaine += '<ellipse  id="oeil1" cx="38" cy="18" rx="5" ry="2" transform="rotate(-45,38,18)" />';
chaine += '<use xlink:href="#oeil1" transform="translate(5,5)" />';
chaine += '</g>';
chaine += '</defs>';

// ouverture du groupe englobant les rangées 1, 2, 3 :
chaine += '<g id="troistours">';
// création de la rangée extérieure :
chaine += '<g id="tour1">';
chaine += '<use xlink:href="#figurebase" id="carre1" transform="translate(5,270) rotate(-45, 30, 30)" /> ';
for(let i = 0; i <  nbtour; i++) {
	chaine += '<use xlink:href="#carre1" transform="rotate(' + (15*i) + ', 300, 300)" /> ';
}
chaine += '</g>';

// création de la rangée  2 :
chaine += '<use xlink:href="#tour1" id="tour2" transform="translate(60,60) scale(0.8) rotate(7.5, 300, 300)" />';
 
// création de la rangée 3 :
chaine += '<use xlink:href="#tour2" transform="translate(60,60) scale(0.8) rotate(7.5, 300, 300)" />';

chaine += '</g>'; //fermeture du groupe englobant les rangées 1, 2, 3

// création des rangées internes 
// le couple (165,435) est le résultat de l'opération (300 * ( 1 - 0.45), 300 * ( 1 - (-0.45) ) 
chaine += '<use xlink:href="#troistours" transform="translate(165,435) scale(0.45,-0.45)" />';

// le code svg est placé dans l'élément svg d'identifiant zonefigure :
document.getElementById("zonefigure").innerHTML = chaine;
</script>
 
</body>
</html>

Le mobile immobile

Écrire une version snap.svg de la figure de l'exercice précédent.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"> </script> 
    </head>
<body>
 
<p>Ajoutez un espace dans le code ci-dessus pour le tracé de la figure. </p>
<script>
// définition de l'élément svg :
var mobile = Snap(600, 600);


// définition de la couleur du grand disque de fond :
var couleurmobile = mobile.gradient("r(0.5,0.5,0.5)#6b8e23-#adf52f");
// le grand disque de fond : 
mobile.circle(300,300,300).attr({fill: couleurmobile});


// un premier lutin  
var bordurenoire = mobile.polygon(8, 8, 52, 52, 8, 52).attr({ fill : "#000000" });
var bordureblanche = mobile.polygon(8, 8, 52, 52, 52, 8).attr({ fill : "#ffffff" });
var carrecentral = mobile.rect(12,12,37,37).attr({fill : "#d46a6a"}); 
var oeil1 = mobile.ellipse(38,18,5,2).transform("r -45");
var oeil2 = oeil1.clone().transform("t 5 5 r -45");
var bouche = mobile.path("M15,15R25,36,46,46").attr({stroke: "black", fill: "none"});
var lutin = mobile.group(bordurenoire, bordureblanche, carrecentral, oeil1, oeil2, bouche).transform("r -45 T 5 270");

 
var tourexterieur = mobile.group();
var nblutinstour = 24; 
for(let i = 0; i < nblutinstour; i++) {
	tourexterieur.add(
		lutin.clone().transform("r -45 T 5 270 R" + (15 * i) + " 300 300")
	);
}

tourexterieur.clone().transform("s 0.8 R 7.5 300 300");
tourexterieur.clone().transform("s 0.63");

tourexterieur.clone().transform("s 0.4 -0.4 R 7.5 300 300");
tourexterieur.clone().transform("s 0.3 -0.3");
tourexterieur.clone().transform("s 0.22 -0.22 R 7.5 300 300");
</script>
 
</body>
</html>

Le mobile mobile

Écrire une version snap.svg de la figure de l'exercice précédent, dans laquelle les lutins tournent vraiment.

Un code possible

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> un manège bien rempli </title>
        
		<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"> </script> 
    </head>
<body>
 
<p>Ajoutez un espace dans le code ci-dessus pour le tracé de la figure. </p>

<script>
// définition de l'élément svg :
var mobile = Snap(600, 600);


// définition de la couleur du grand disque de fond :
var couleurmobile = mobile.gradient("r(0.5,0.5,0.5)#6b8e23-#adf52f");
// le grand disque de fond : 
mobile.circle(300,300,300).attr({fill: couleurmobile});


// un premier lutin  
var bordurenoire = mobile.polygon(8, 8, 52, 52, 8, 52).attr({ fill : "#000000" });
var bordureblanche = mobile.polygon(8, 8, 52, 52, 52, 8).attr({ fill : "#ffffff" });
var carrecentral = mobile.rect(12,12,37,37).attr({fill : "#d46a6a"}); 
var oeil1 = mobile.ellipse(38,18,5,2).transform("r -45");
var oeil2 = oeil1.clone().transform("t 5 5 r -45");
var bouche = mobile.path("M15,15R25,36,46,46").attr({stroke: "black", fill: "none"});
var lutin = mobile.group(bordurenoire, bordureblanche, carrecentral, oeil1, oeil2, bouche).transform("r -45 T 5 270");

 
var tourexterieur = mobile.group();
tourexterieur.add(lutin);

var nblutinstour = 24; 
for(let i = 0; i < nblutinstour; i++) {
	tourexterieur.add(
		lutin.clone().transform("r -45 T 5 270 R" + (15 * i) + " 300 300")
	);
}

var tour2 = tourexterieur.clone().transform("s 0.8 R 7.5 300 300");
var tour3 = tourexterieur.clone().transform("s 0.63");

var tour4 = tourexterieur.clone().transform("s 0.4 -0.4 R 7.5 300 300");
var tour5 = tourexterieur.clone().transform("s 0.3 -0.3");
var tour6 = tourexterieur.clone().transform("s 0.22 -0.22 R 7.5 300 300");

var sensh = mobile.group(tourexterieur, tour2, tour3);
var senst = mobile.group(tour4, tour5, tour6);

sensh.animate({ transform: 'r 760,300,300' }, 50000 );
senst.animate({ transform: 'r -760,300,300' }, 50000 );
</script>
</body>
</html>