Une montre en SVG et JavaScript

function Horloge() {
	var date = new Date();
	var minute = date.getUTCMinutes()*6;
	var heure  = date.getUTCHours()%12*30+Math.round(minute/12);
	
	document.getElementById('h').setAttribute("transform", "rotate("+ heure +" 100 100)");
	document.getElementById('m').setAttribute("transform", "rotate("+ minute +" 100 100)");
}

La fonction Horloge() est classique ; notez juste le mouvement de l'aiguille des heures qui ne marque pas seulement les heures pleines.

<filter id="myfilter">
	<!-- Brightness -->
	<feComponentTransfer>
	  <feFuncR class="bri" type="linear" slope="0.9"/>
	  <feFuncG class="bri" type="linear" slope="0.9"/>
	  <feFuncB class="bri" type="linear" slope="0.9"/>
	</feComponentTransfer>
</filter>

On définit un filtre Brightness qui va assombrir légèrement l'horizon artificiel.

window.addEventListener("devicelight", function (event) {
	// Read out the lux value
	var lux = Math.round(event.value/250+2)/10;
	var elt = document.getElementsByClassName('bri');
	elt[0].setAttribute("slope", lux);
	elt[1].setAttribute("slope", lux);
	elt[2].setAttribute("slope", lux);
	var couleur = lux < .3 ? 'hsl(120, 100%, 80%)' : 'white' ;
	var ecr = document.getElementById('blanc');
	ecr.style.stroke = couleur;
	ecr.style.fill   = couleur;
	document.getElementById('m1').style.fill   = couleur;
	document.getElementById('h1').style.fill   = couleur;
	//document.getElementById("lux").innerHTML = lux;
});

Le capteur de luminosité de la tablette est interprété pour modifier dynamiquement le filtre.

Conclusion : cet exercice m'a permis de découvrir comment rendre dynamique une image SVG. D'autres techniques existent comme les images dynamiques en PHP ou des plugins jQuery qui génèrent par exemple des histogrammes à l'aide de fichiers Json. Ce qui est particulièrement intéressant ici est que le fichier image embarque toute sa logique de fonctionnement.