Démos (SVG, JS etc)

Pour chaque démonstration ci-dessous, cliquez sur l'image d'aperçu ou sur le sous-titre explicatif pour accéder au code de la démonstration (certaines n'ont pas d'image, car je ne les ai parfois plus!)

D'autres démonstrations techniques sont disponibles sur https://mdn.reinom.com/

Démos SVG

Animated
Déplacement de petits véhicules (symbolisés par des rectangles) le long d'une route, par Alucard
Comparaison des modes lRGB et sRGB en SVG
Animated
10000 objets, sans ramer: ils sont mis dans un arrière-plan
Animated
Exemple d'animation SVG et d'un ralentis de cette même animation
Exemple d'application de vector-effect
Zoomer sur un élément ou un groupe d'éléments SVG
Animated
Une carte (de Dracca) au zoom animé: cliquez sur une île pour zoomer et sur l'eau pour dézoomer
Animated
Afficher une progression le long d'un chemin (randonnée, progression de troupes,…)
Animated
Un ombrage intérieur animé en SVG
Animated
Clip-path animé, pour un effet de révélateur
Changez la teinte, la saturation et la coloration en général grâce aux filtres SVG
Animated
Pour une transform matrix donnée, il existe plusieurs rotate-translate-scale équivalents
Placer des marqueurs (réguliers ou non) le long d'une chemin SVG
Placez des marqueurs personnalisés le long d'un chemin
Animated
keyTimes et keyPoints modifient la vitesse de déroulement d'une animation
Animated
Une animation SVG peut être stoppée et relancée grâce aux attributs de animate
Animated
Eoliennes animées
Animated
Altération des pixels dans un SVG, similaire à un FragmentShader 2D

Démos SVG… bancales!

Les deux exemples suivants reposent sur des astuces visuelles (un "hack de l'interface"). Elles peuvent donc générer des artefacts.

Animated
Un système solaire vu de haut
Animated
Un système solaire vu de coté

J'ai perdu le code pour cette démonstration, je n'ai donc plus que l'aperçu, et le concept général…

Un brouillard de guerre pour les villes bleus, en SVG (clipPath et mask)

Démos PHP

Pas d'image pour cette démo

Une démonstration téléchargeable (en PHP) des "Server-Side Events"

Démos Javascript

Un exemple de formulaire dynamique, sans AJAX!
Essayez toutes les valeurs, pour voir…