Démos (SVG, JS etc)

Formulaire/Popin sans AJAX

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

Server-side Events

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

Dé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 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-plan

Screenshot
Placez les nombreux éléments dans un background

Slow motion

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

Vector-effect

Screenshot
Exemple d'application de vector-effect

Systèmes stellaires

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

Système stellaire (vu de haut)

Screenshot
Un système solaire vu de haut

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

Screenshot
Un système solaire vu de coté

Brouillard 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 (dispo en screen uniquement)

Une 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 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 glow

Screenshot
Un ombrage intérieur animé en SVG

Clip-path

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

Zoomer sur un élément

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

Filtres SVG

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

Matrix → RTS

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

Marqueurs le long d'un chemin

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

Play/Replay button

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

Animation key times/points

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

Markers personnalisés

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

Eoliennes

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

Displacement map

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