Démos (SVG, JS etc)
02/11/2019

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è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é

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

⇈