Démos (SVG, JS etc)

Formulaire/Popin sans AJAXFormulaire/Popin sans AJAX

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

Server-side EventsServer-side Events

Voici une démonstration téléchargeable (en PHP) des Server-Side Events .

Déplacement le long d'un cheminDéplacement le long d'un chemin

Screenshot
Déplacement de petits véhicules (symbolisés par des rectangles) le long d'une route, par Alucard

lRGB et sRGBlRGB et sRGB

Screenshot
Pour le cercle vert, les filtres effectuent Resultat = ( 0*0.5, 128*1.5, 0*0.5+127) dans deux espaces différents

10000 objets en arrière-plan10000 objets en arrière-plan

Screenshot
Placez les nombreux éléments dans un background

Slow motionSlow motion

Screenshot
Exemple d'animation SVG et d'un ralentis de cette même animation

Vector-effectVector-effect

Screenshot
Exemple d'application de vector-effect

Système stellaire (vu de haut)Système stellaire (vu de haut)

Screenshot
Un système solaire vu de haut

Système stellaire (vu de côté)Système stellaire (vu de côté)

Screenshot
Un système solaire vu de coté

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

Brouillard de guerreBrouillard de guerre

Chaque ville du joueur crée une 'bulle' de visibilité
Chaque ville bleue est un "ilot" de visibilité, centre d'un clipPath et d'un mask

Ayant perdu les sources de cet exemple, je ne peux vous en proposer qu'un screenshot!

Une carte de jeu interactiveUne carte de jeu interactive

Screenshot
Une carte au zoom animé (issue de Dracca): cliquez sur une île pour "zoomer" dessus et sur l'eau pour dézoomer

Afficher une progression le long d'un cheminAfficher une progression le long d'un chemin

Screenshot
Un chemin de randonnée, ou l'avancement d'une troupe le long d'une route, ou la progression d'un poison dans un vaisseau sanguin, etc

Inner glowInner glow

Screenshot
Un ombrage intérieur animé en SVG

Clip-pathClip-path

Screenshot
Clip-path animé, pour un effet de révélateur

Zoomer sur un élémentZoomer sur un élément

Screenshot
Zoomer sur un élément ou un groupe d'éléments SVG

Filtres SVGFiltres SVG

Screenshot
Changez la teinte, la saturation et la coloration en général grâce aux filtres SVG

Matrix → RTSMatrix → RTS

Screenshot
Pour une transform matrix donnée, il existe plusieurs rotate-translate-scale équivalents

Marqueurs le long d'un cheminMarqueurs le long d'un chemin

Screenshot
Pour placer des marqueurs (réguliers ou non) le long d'une chemin SVG

Play/Replay buttonPlay/Replay button

Screenshot
Une animation SVG peut être stoppée et relancée grâce aux attributs de animate

Animation key times/pointsAnimation key times/points

Screenshot
KeyTimes et keyPoints permettent de modifier la vitesse d'une animation au fil de son déroulement

Markers personnalisésMarkers personnalisés

Screenshot
Placez des marqueurs personnalisés le long d'un chemin

EoliennesEoliennes

Screenshot
Eoliennes animées mais attention, le navigateur ramera si vous en mettez trop!

Displacement mapDisplacement map

Screenshot
Les pixels d'une "texture" dans un SVG peuvent être altérés, comme si on utilisant un FragmentShader 2D