WEB DESIGN

SVG et animation pour un site internet

Retrouvez dans cette article des exemples d'animations réalisées par Snoweb avec des SVG pour un site internet.

Alexis Le BaronAlexis Le Baron

Alexis Le Baron

Développeur web chez Snoweb

Publié le 14 juillet 2021 08:48 (Mise à jour le 19 novembre 2021 16:13)

Retrouvez dans cette article 4 effets d'animation SVG pour un site internet :

1 - L'effet masque

L'attribut <clipPath> d'un SVG permet de faire apparaître des formes sur un groupe <g>.

Exemple :

<clipPath id="my-id">
    <rect width="100" height="100"></rect>
</clipPath>

Que l'on applique à un groupe :

<g clip-path="url(#my-id)">
	...
</g>

Le <clipPath> permet de faire apparaître/disparaitre des groupes d'éléments comme ici :

  • les faces des cubes
  • la lumière
  • les étoiles
svg animation avec mask

Le code de cette animation SVG est disponible sur ce lien.

2 - L'effet vague

Pour avoir l'effet d'une vague, on utilise un <path> avec un simple <animate> qui va faire varier sa direction :

<path d="...">
    <animate
        attributeName="d"
        dur="5s"
        begin="1s"
        values=" ... ; ... ; ... "
    />
</path>

Ce qui nous donne ceci :

svg animation vagues

Le code de cette animation SVG est disponible sur ce lien.

3 - L'effet stroke

L'attribut d'un SVG peut être soit en "stroke" (trait) ou en "fill" (remplissage).

Ici, on utilise un <path> avec "stroke" pour avoir un trait, ce qui nous permet de jouer sur son tracé :

<path d="..." stroke-dashoffset="100%">
    <animate
	    attributeName="stroke-dasharray"
	    dur="20s"
	    values="80%;120%;80%"
	    repeatCount="indefinite"
    />
</path>

Exemple :

svg animation avec stroke

Le code de cette animation SVG est disponible sur ce lien.

4 - L'effet cercle

Pour donner l'impression de remplir une partie d'un SVG, il est possible d'animer le rayon d'un élément <circle> comme ceci :

<circle cx="50" cy="100" r="0">
    <animate
        attributeName="r"
        dur="5s"
        values="0;50;0"
    />
</circle>

Ce qui nous donne :

svg animation avec cercle

Le code de cette animation SVG est disponible sur ce lien.

J'ai besoin d'aide en web design pour larefonte de mon site internet

Articles en liens avec le web design

Retrouvez tous nos articles sur le web design de votre site internet.

Inscrivez-vous à notre newsletter web design

Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.

Nos derniers articles sur le web design

Inscris-toi à notre newsletter et reçois les dernières nouveautés et astuces en lien avec le web design.

pop-up newsletter web design