# Animations en SVG

## Création du fichier graphique de base

1. Définir un symbole en forme de triangle, réalisé à l'aide d'un polygone entre les points (20,0), (40,40), (0,40) et (20,0). Placer ce triangle au point de coordonnées (200,200), en le remplissant avec la couleur bleue et une opacité de 0.6.
2. Placer un cercle centré au point de coordonnées (220,200), de rayon 140, de contour rouge et sans remplissage.
3. Placer un cercle centré au point de coordonnées (220,200), de rayon 2, de contour et de remplissage noirs.

Retour au cours

## Animation de base

Utiliser l'élément <animate> pour déplacer le triangle horizontalement. Utiliser les attributs gérant la durée, la répétition. Contrôler l'animation par un clic sur un bouton.

Retour au cours

## Changements de couleurs

Faire varier la couleur de bleue à verte, puis bleue, avec une période de dix secondes.

Retour au cours

## Rotations et translations

1. Faire en sorte que le triangle fasse trois tours en dix secondes, autour du point de coordonnées (220,200).
2. Répéter ces rotations à l'infini.
3. En dix secondes également, modifier le paramètre de translation de (0,0) à (0,100), puis retour à (0,0).

Retour au cours

## Pour aller plus loin...

On peut également ajouter un filtrage. Dans la liste de définitions, ajouter les lignes suivantes :

    <filter id="flou">
    	<feGaussianBlur stdDeviation="1">
    	</feGaussianBlur>
    </filter>

Ces lignes définissent un filtre gaussien, nommé `flou`. On l'applique au triangle avec `filter="url(#flou)"` dans son appel. Faire varier l'attribut `stdDeviation` de 0 à 4, puis 0 avec une période de dix secondes.

Retour au cours