<!DOCTYPE html>
<html onclick=firstPlay() style="cursor:grab;">
<head>
<meta charset="utf-16be" />
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
<style>
.monCadre {
/*	border: 1px solid black;*/
	height : 13vw; width : 90vw;
	background-color: darkgrey;
	animation: couleurDeFond 3s;
}
.monCadre:hover{
	document.getElementById("musique").play()
}

@keyframes couleurDeFond {
	0% {background-color : darkgray;}
	10% {background-color : deeppink;}
	20% {background-color : pink;}
	30% {background-color : lightpink;}
	40% {background-color : lightblue;}
	50% {background-color : blue;}
	60% {background-color : darkblue;}
	70% {background-color : lightblue;}
	80% {background-color : lightgrey;}
	90% {background-color : grey;}
	100% {background-color : darkgrey;}
	}

.monEmballage{
	width :100%; height : 100%;
}
.container {
	width :100%; height : 100%;
}
.monSVG {
	height : 13vw; width : 90vw;
}
.monSVG, .monCadre, .monTexte1, .monTexte2 {
	position: absolute; /* postulat de départ */
	top: 50%; left: 50%; /* à 50%/50% du parent référent */
	transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
	overflow: visible;
	font-size : 100px; font-family: 'Fredoka One', cursive;
	text-anchor : middle; alignment-baseline : hanging;
}
.monTexte1, .monTexte2 {
  	transition: fill .3s ease-in-out;
  	transition: stroke-width .3s ease-in-out;
	pointer-events: auto;
	cursor:grabbing;
}
.monTexte1, .monTexte2:hover {
	stroke :purple;
	stroke-width : 10px;
  	fill: deepPink;
}
.monTexte1:hover, .monTexte2 {
	fill: darkblue;
	stroke :lightblue;
	stroke-width : 5px;
}


@keyframes t1 {
  0%  {transform: rotate(0deg); transform-origin: -190 10;}
  25% {transform: rotate(-120deg); transform-origin: -190 10;}
  50%  {transform: rotate(180deg);transform-origin: -190 10;}
  75% {transform: rotate(-40deg);transform-origin: -190 10;}
  100% {transform: rotate(0deg);transform-origin: -190 10;}
}
@keyframes t2 {
  0%  {transform: rotate(0deg); transform-origin: -190 10;}
  25% {transform: rotate(-120deg); transform-origin: -190 10;}
  50%  {transform: rotate(180deg);transform-origin: -190 10;}
  75% {transform: rotate(-40deg);transform-origin: -190 10;}
  100% {transform: rotate(0deg);transform-origin: -190 10;}
}
@keyframes t3 {
  0%  {transform: rotate(0deg); transform-origin: -121 10;}
  25% {transform: rotate(170deg); transform-origin: -121 10;}
  50%  {transform: rotate(-90deg);transform-origin: -121 10;}
  100% {transform: rotate(1800deg);transform-origin: -121 10;}
}
@keyframes t4 {
  0%  {transform: rotate(0deg); transform-origin: -46 10;}
  25% {transform: rotate(-1200deg); transform-origin: -46 10;}
  50%  {transform: rotate(-300deg);transform-origin: -46 10;}
  75% {transform: rotate(-100deg);transform-origin: -46 10;}
  100% {transform: rotate(0deg);transform-origin: -46 10;}
}
@keyframes t5 {
  0%  {transform: rotate(0deg); transform-origin: 36 10;}
  25% {transform: rotate(300deg); transform-origin: 36 10;}
  50%  {transform: rotate(180deg);transform-origin: 36 10;}
  75% {transform: rotate(-40deg);transform-origin: 36 10;}
  80% {transform: rotate(30deg);transform-origin: 36 10;}
  85% {transform: rotate(-20deg);transform-origin: 36 10;}
  90% {transform: rotate(10deg);transform-origin: 36 10;}
  95% {transform: rotate(-5deg);transform-origin: 36 10;}
  100% {transform: rotate(0deg);transform-origin: 36 10;}
}
@keyframes t6 {
  0%  {transform: rotate(0deg); transform-origin: 110 10;}
  100% {transform: rotate(-1800deg);transform-origin: 110 10;}
}
@keyframes t7 {
  0%  {transform: rotate(0deg); transform-origin: 189 10;}
  100% {transform: rotate(1800deg);transform-origin: 189 10;}
}
@keyframes t8 {
  0%  {transform: rotate(0deg); transform-origin: 278 10;}
  100% {transform: rotate(-1800deg);transform-origin: 278 10;}
}
@keyframes t9 {
  0%  {transform: rotate(0deg) ; transform-origin: 340 10;}
  100% {transform: rotate(1800deg); transform-origin: 340 10;}
}
.tr1{ animation: t1 3s ease-in-out; pointer-events: none; }
.tr2{ animation: t2 3s ease-in-out; pointer-events: none; }
.tr3{ animation: t3 3s ease-in-out; pointer-events: none; }
.tr4{ animation: t4 3s ease-in-out; pointer-events: none; }
.tr5{ animation: t5 3s ease-in-out; pointer-events: none; }
.tr6{ animation: t6 3s ease-in-out; pointer-events: none; }
.tr7{ animation: t7 3s ease-in-out; pointer-events: none; }
.tr8{ animation: t8 3s ease-in-out; pointer-events: none; }
.tr9{ animation: t9 3s ease-in-out; pointer-events: none; }

@keyframes bG {
  0%   {transform: translate(0, 0); }
  10%   {transform: translate(0, -50px); }
  20%  {transform: translate(0, 10px); }
  30%  {transform: translate(0, -40px); }
  40%  {transform: translate(0, 8px); }
  50%  {transform: translate(0, -30px); }
  58%  {transform: translate(0, 6px); }
  66%  {transform: translate(0, -20px); }
  74%  {transform: translate(0, 4px); }
  82%  {transform: translate(0, -10px); }
  90%  {transform: translate(0, 2px); }
  100% {transform: translate(0, 0); }
}
@keyframes bP {
  0%   {transform: translate(0, 0); }
  1%   {transform: translate(0, -20px); }
  10%  {transform: translate(0, 5px); }
  20%  {transform: translate(0, -16px)  rotate(720deg); }
  30%  {transform: translate(0, 4px); }
  40%  {transform: translate(0, -12px); }
  50%  {transform: translate(0, 3px); }
  60%  {transform: translate(0, -8px)   rotate(-720deg); }
  70%  {transform: translate(0, 2px); }
  80%  {transform: translate(0, -6px); }
  90%  {transform: translate(0, 1px); }
  100% {transform: translate(0, 0); }
}

.b1{ animation: bP 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.b1:hover { animation-play-state: running; }
.b2{ animation: bG 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.b2:hover { animation-play-state: running; }
.b3{ animation: bP 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.b3:hover { animation-play-state: running; }
.b4{ animation: bG 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.b4:hover { animation-play-state: running; }
.b5{ animation: bP 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.b5:hover { animation-play-state: running; }
.b6{ animation: bP 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.b6:hover { animation-play-state: running; }
.b7{ animation: bG 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.b7:hover { animation-play-state: running; }
.b8{ animation: bP 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.b8:hover { animation-play-state: running; }
.b9{ animation: bG 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.b9:hover { animation-play-state: running; }

@keyframes tour1 {
  0%   {transform: rotate(0deg); transform-origin: 0 0.5em; }
  25%  {transform: rotate(720deg); transform-origin: 0 0.5em; }
  75%  {transform: rotate(-720deg); transform-origin: 0 0.5em; }
  100% {transform: rotate(0deg); transform-origin: 0 0.5em; }
}
@keyframes tour2 {
  0%   {transform: rotate(0deg); transform-origin: 0 0.5em; }
  10%  {transform: rotate(20deg); transform-origin: 0 0.5em; }
  20%  {transform: rotate(-20deg); transform-origin: 0 0.5em; }
  30%  {transform: rotate(20deg); transform-origin: 0 0.5em; }
  40%  {transform: rotate(-20deg); transform-origin: 0 0.5em; }
  50%  {transform: rotate(20deg); transform-origin: 0 0.5em; }
  60%  {transform: rotate(-20deg); transform-origin: 0 0.5em; }
  70%  {transform: rotate(20deg); transform-origin: 0 0.5em; }
  80%  {transform: rotate(-20deg); transform-origin: 0 0.5em; }
  90%  {transform: rotate(20deg); transform-origin: 0 0.5em; }
  100% {transform: rotate(0deg); transform-origin: 0 0.5em; }
}

.tt1{ animation: tour1 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.tt1:hover { animation-play-state: running; }
.tt2{ animation: tour2 3s ease-in-out; animation-play-state: paused;  animation-iteration-count: infinite;}
.tt2:hover { animation-play-state: running; }

</style>
<audio src="smallworld.mp3" id="musique" loop></audio>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body class = "monCadre" >
<div class = "monEmballage"><div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class = "monSVG"  viewBox="0 0 100 100">
	<path d="M-100 -200 Q -150 -150 -200 -100 T -200 80 -270 10" stroke="none" fill="transparent" id="mC1"/>
	<path d="M0 -200 Q 100 -225 200 -150 T -100 100 -190 10" stroke="none" fill="transparent" id="mC2"/>
	<path d="M300 200 Q 200 150 100 100 T 0 100 -121 10" stroke="none" fill="transparent" id="mC3"/>
	<path d="M400 -300 Q 300 50 200 200 T -50 200 -46 10" stroke="none" fill="transparent" id="mC4"/>
	<path d="M-200 -300 Q -250 -250 -300 -200 T -200 -100 36 10" stroke="none" fill="transparent" id="mC5"/>
	<path d="M90 250 Q 110 200 130 150 T 60 -10 110 10" stroke="none" fill="transparent" id="mC6"/>
	<path d="M0 -250 Q -10 -200 -20 -150 T 120 -80 189 10" stroke="none" fill="transparent" id="mC7"/>
	<path d="M270 -250 Q 250 -200 230 -150 T 270 -50 278 10" stroke="none" fill="transparent" id="mC8"/>
	<path d="M0 250 Q 60 175 120 100 T 200 -50 340 10" stroke="none" fill="transparent" id="mC9"/>
	<path d="M0 250 Q 60 175 120 100 T 250 0 380 25" stroke="none" fill="transparent" id="mC10"/>
<g transform="translate(-225 0)"><animateMotion dur="3s"><mpath xlink:href="#mC1"/></animateMotion>
	<g class = "tr1"><g class = "b1"><g class = "tt1"><text class="monTexte1" id="goMusique1" >O</text></g></g></g>
</g>
<g transform="translate(-150 0)"><animateMotion dur="3s"><mpath xlink:href="#mC2"/></animateMotion>
	<g class = "tr2"><g class = "b2"><g class = "tt2"><text class="monTexte2" id="stopMusique1">R</text></g></g></g>
</g>
<g transform="translate(-75 0)"><animateMotion dur="3s"><mpath xlink:href="#mC3"/></animateMotion>
	<g class = "tr3"><g class = "b3"><g class = "tt1"><text class="monTexte1" id="goMusique2">Y</text></g></g></g>
</g>
<g><animateMotion dur="3s"><mpath xlink:href="#mC4"/></animateMotion>
	<g class = "tr4"><g class = "b4"><g class = "tt1"><text class="monTexte2" id="stopMusique2">Z</text></g></g></g>
</g>
<g transform="translate(85 0)"><animateMotion dur="3s"><mpath xlink:href="#mC5"/></animateMotion>
	<g class = "tr5"><g class = "b5"><g class = "tt2"><text class="monTexte1"id="goMusique3">A</text></g></g></g>
</g>
<g transform="translate(135 0)"><animateMotion dur="3s"><mpath xlink:href="#mC6"/></animateMotion>
	<g class = "tr6"><g class = "b6"><g class = "tt1"><text class="monTexte2" id="stopMusique3">-</text></g></g></g>
</g>
<g transform="translate(230 0)"><animateMotion dur="3s"><mpath xlink:href="#mC7"/></animateMotion>
	<g class = "tr7"><g class = "b7"><g class = "tt2"><text class="monTexte1" id="goMusique4">M</text></g></g></g>
</g>
<g transform="translate(315 0)"><animateMotion dur="3s"><mpath xlink:href="#mC8"/></animateMotion>
	<g class = "tr8"><g class = "b8"><g class = "tt2"><text class="monTexte2" id="stopMusique4">A</text></g></g></g>
</g>
<g transform="translate(355 0)"><animateMotion dur="3s"><mpath xlink:href="#mC9"/></animateMotion>
	<g class = "tr9"><g class = "b9"><g class = "tt1"><text class="monTexte1" id="goMusique5">I</text></g></g></g>
</g>
<g transform="translate(390 0)"><animateMotion dur="3s"><mpath xlink:href="#mC10"/></animateMotion>
	<g class = "tr9"><a xlink:href="http://www.oryza-mai.com"><text class="monTexte2">.</text></a></g>
</g>
</svg>
<ol style = "font-size : 50px; margin-top : 200px; color : deepPink;">
  <li><a href="http://oryza-mai.com/Le_Cube.html">Le Cube</a></li>
  <li><a href="http://oryza-mai.com/L_Anneau.html">L'Anneau</a></li>
  <li><a href="http://oryza-mai.com/L_Anneau_Troue.html">L'anneau qu'on perce</a></li>
  <li><a href="http://oryza-mai.com/Combien_de_Trous.html">Combien de trous ?</a></li>
</ol>
</div></div>
<script>
var myAudio = document.getElementById("musique");
var isPlaying = false;
var hasPlayed = false;

function firstPlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
  	if(! hasPlayed) {
  		hasPlayed = true;
    	myAudio.play();
    }
  }
};
function togglePlay() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
};
myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};
$("#goMusique1, #goMusique2, #goMusique3, #goMusique4, #goMusique5").mouseenter(function() {togglePlay();});
$("#goMusique1, #goMusique2, #goMusique3, #goMusique4, #goMusique5").mouseleave(function() {togglePlay();});
$("#stopMusique1, #stopMusique2, #stopMusique3, #stopMusique4").mouseenter(function() {document.getElementById("musique").pause();});
</script>
</body>
</html>