Formulaire/Popin sans AJAX
Un exemple de formulaire dynamique, sans AJAX! Essayez toutes les valeurs, pour voir…
Déplacement le long d'un chemin
Déplacement de petits véhicules (symbolisés par des rectangles) le long d'une route, par Alucard
lRGB et sRGB
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
Placez les nombreux éléments dans un background
Slow motion
Exemple d'animation SVG et d'un ralentis de cette même animation
Vector-effect
Exemple d'application de vector-effect
Système stellaire (vu de haut)
Un système solaire vu de haut
Système stellaire (vu de côté)
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 guerre
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 interactive
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
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
Un ombrage intérieur animé en SVG
Un ombrage intérieur (mais moche!)
Clip-path
Clip-path animé, pour un effet de révélateur
Zoomer sur un élément
Zoomer sur un élément ou un groupe d'éléments SVG
Filtres SVG
Changez la teinte, la saturation et la coloration en général grâce aux filtres SVG
Matrix → RTS
Pour une transform matrix
donnée,
il existe plusieurs rotate-translate-scale
équivalents
Marqueurs le long d'un chemin
Pour placer des marqueurs (réguliers ou non) le long d'une chemin SVG
Play/Replay button
Une animation SVG peut être stoppée
et relancée grâce aux attributs de animate
Animation key times/points
KeyTimes et keyPoints permettent de modifier la vitesse d'une animation au fil de son déroulement
Markers personnalisés
Placez des marqueurs personnalisés le long d'un chemin
Eoliennes
Eoliennes animées mais attention, le navigateur ramera si vous en mettez trop!
Displacement map
Les pixels d'une "texture" dans un SVG peuvent être altérés, comme si on utilisant un FragmentShader 2D