Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium

Animations SVG & Art Génératif

SVG animations, art génératif, masques et clip-path.

Mis à jour le

Comment animer du SVG, et pourquoi le préférer à un GIF ?

Les animations SVG restent nettes à toutes les tailles et ne pèsent que quelques kilo-octets. Le tracé progressif anime stroke-dashoffset face à stroke-dasharray, les remplissages et les couleurs utilisent des transitions CSS, les formes se transforment entre des tracés qui ont le même nombre de points, et l'art génératif comme les champs de flux est calculé en JavaScript puis dessiné en SVG ou en canvas.

Comment choisir, performances et accessibilité
  • Utilisez Line Draw ou Logo Draw pour révéler un logo ou une illustration, Animated Icons pour les retours d'interface, et Perlin Flow Field ou Geometric Tessellation comme fonds génératifs.
  • Par rapport à un GIF, le SVG est plus léger, redimensionnable sans perte et modifiable en CSS.
  • Simplifiez les tracés complexes, donnez un title aux graphiques qui portent du sens et masquez les purement décoratifs aux lecteurs d'écran avec aria-hidden.
  • Line Draw, Perlin Flow Field et Text Mask Video sont gratuits avec leur code complet ; les autres sont inclus dans Premium.
Générateur

Vos SVG, en volume

Les effets ci-dessous animent vos SVG à plat. Le générateur SVG en 3D leur donne une épaisseur : vous déposez votre fichier, vous réglez la matière et les arêtes, et l'objet tourne. Un logo en PNG fait l'affaire, il est tracé au passage.

L'aperçu et l'image sont gratuits. Le code s'emporte avec un abonnement.

Ouvrir le générateur

Line Draw

Chemin SVG qui se dessine progressivement avec stroke-dasharray et dashoffset.

CSS stroke-dasharray
Voir le code source
HTML
<div class="demo-preview">
  <div class="svg-container">
    <svg class="line-draw-svg" viewBox="0 0 150 150">
      <path d="M20,75 L50,30 L80,60 L110,20 L130,50 M20,130 L60,90 L100,110 L130,80"/>
    </svg>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.svg-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.line-draw-svg {
  width: 150px;
  height: 150px;
}

.line-draw-svg path {
  fill: none;
  stroke: #6366f1;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: lineDraw 3s ease forwards infinite;
}

@keyframes lineDraw {
  0% {
    stroke-dashoffset: 500;
  }

  50% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -500;
  }
}
JavaScript
/* CSS pur — aucun JavaScript requis */

Logo Draw

Animation de dessin de logo complexe avec plusieurs éléments en sequence.

CSS Multi-layer

Morphing Shape

Forme qui se transforme en différentes geometries avec animation CSS.

CSS Morphing

SVG Fill Animation

Forme qui se remplit de couleur progressivement du bas vers le haut.

CSS Clip-path

Animated Icons

Icônes avec animations subtiles: checkmark et X qui se dessinent.

CSS Icons

Path Following

Élément qui suit un chemin SVG défini avec animateMotion.

SMIL animateMotion

SVG Text Draw

Texte dont le contour se dessine puis se remplit de couleur.

CSS Text

Pulse / Heartbeat

Coeur SVG avec animation de battement et ondes de pulsation.

CSS Pulse

Rotating Gears

Engrenages imbriques qui tournent en sens inverse.

CSS Rotation

Wave Path

Ligne ondulante animée avec gradient et effet de mouvement.

CSS Wave

Perlin Flow Field

Particules guidées par un champ de vecteurs Perlin.

Canvas Perlin Particles
Voir le code source
HTML
<div class="demo-preview">
  <div class="gen-container">
    <canvas id="flowField"></canvas>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.gen-container {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}
JavaScript
(function() {
  // ========== ART GÉNÉRATIF ==========

  // 1. Flow Field
  (function() {
    var flowCanvas = document.getElementById('flowField');
    if (!flowCanvas) return;
    var flowCtx = flowCanvas.getContext('2d');
    if (!flowCtx) return;
    flowCanvas.width = flowCanvas.parentElement.offsetWidth;
    flowCanvas.height = 300;

    var particles = [];
    var numParticles = 500;
    var time = 0;

    function noise(x, y, t) {
      return Math.sin(x * 0.01 + t) * Math.cos(y * 0.01 + t) +
        Math.sin((x + y) * 0.005 + t * 0.5);
    }

    for (var i = 0; i < numParticles; i++) {
      particles.push({
        x: Math.random() * flowCanvas.width,
        y: Math.random() * flowCanvas.height,
        speed: 0.5 + Math.random() * 1,
        hue: Math.random() * 60 + 220
      });
    }

    function drawFlow() {
      flowCtx.fillStyle = 'rgba(10, 10, 15, 0.05)';
      flowCtx.fillRect(0, 0, flowCanvas.width, flowCanvas.height);

      particles.forEach(function(p) {
        var angle = noise(p.x, p.y, time) * Math.PI * 2;
        p.x += Math.cos(angle) * p.speed;
        p.y += Math.sin(angle) * p.speed;

        if (p.x < 0) p.x = flowCanvas.width;
        if (p.x > flowCanvas.width) p.x = 0;
        if (p.y < 0) p.y = flowCanvas.height;
        if (p.y > flowCanvas.height) p.y = 0;

        flowCtx.fillStyle = 'hsla(' + p.hue + ', 80%, 60%, 0.8)';
        flowCtx.beginPath();
        flowCtx.arc(p.x, p.y, 1, 0, Math.PI * 2);
        flowCtx.fill();
      });

      time += 0.01;
      requestAnimationFrame(drawFlow);
    }
    drawFlow();
  })();
})();

Geometric Tessellation

Mosaïque géométrique avec animations décalées.

CSS Grid Pattern

Recursive Circles

Cercles concentriques avec pulsation.

CSS JS Recursive

Lissajous Curves

Courbes harmoniques en mouvement perpétuel.

Canvas Math Curves

Voronoi Pattern

Diagramme de Voronoi avec dégradés.

CSS Gradient Organic

Sine Wave Grid

Grille de points animés en onde sinusoïdale.

CSS JS Wave

Spirograph

Anneaux rotatifs créant des motifs hypnotiques.

CSS JS Rotation

Fractal Tree

Arbre fractal généré récursivement.

Canvas Fractal Recursive

Maze Generator

Labyrinthe généré avec l'algorithme de backtracking récursif.

Canvas Algorithm Recursive

Cellular Automata

Jeu de la Vie de Conway - simulation de vie artificielle.

Canvas Simulation Conway

PLAY

Text Mask Video

Texte rempli avec un gradient animé simulant une vidéo.

CSS Text Gradient
Voir le code source
HTML
<div class="demo-preview dark-bg">
  <div class="mask-demo text-mask-video">
    <h2>PLAY</h2>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(10, 10, 15);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.demo-preview {
  --bg-card: #12121a;
  --radius-xl: 1rem;
}

.text-mask-video {
  background: transparent;
}

.text-mask-video h2 {
  font-size: 4rem;
  font-weight: 900;
  background: linear-gradient(90deg, #6366f1, #d946ef, #06b6d4, #f43f5e, #6366f1);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textMaskGradient 3s linear infinite;
}

.mask-demo {
  width: 280px;
  height: 180px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.demo-preview.dark-bg {
  background: #0a0a0f;
}

@keyframes textMaskGradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 400% 50%;
  }
}
JavaScript
/* CSS pur — aucun JavaScript requis */

Shape Clip Reveal

Contenu révélé à travers une forme circulaire au survol.

CSS Clip-path Hover

Image Mask Text

Image visible uniquement à travers le texte.

CSS Blend Text

Circular Reveal

Masque circulaire qui s'étend depuis la position de la souris.

JS Clip-path Interactive

SVG Clip Path

Forme complexe SVG utilisée comme masque de découpe.

SVG Clip-path Shape

Gradient Mask Fade

Masque gradient pour des bords fondus élégants.

CSS Mask Gradient

Moving Mask

Masque qui suit le mouvement de la souris.

JS Mask Mouse

Split Reveal

Image divisée qui se révèle au survol.

CSS Clip-path Split

Blob Mask

Forme blob organique utilisée comme masque animé.

CSS SVG Mask Organic

Diagonal Clip

Animation clip-path diagonale avec plusieurs couches.

CSS Clip-path Layers

Questions fréquentes

Comment animer le traçage d'un SVG en CSS ? +

Utilisez stroke-dasharray et stroke-dashoffset. Définissez dasharray à la longueur totale du path, dashoffset à la même valeur, puis animez dashoffset vers 0. Le trait se dessine progressivement. Obtenez la longueur avec path.getTotalLength() en JS.

Comment faire du morphing SVG ? +

Le morphing nécessite deux paths avec le même nombre de points. Animez l'attribut d du path entre les deux formes. En CSS, utilisez une transition sur d (supporte dans Chrome/Edge). En JS, utilisez des librairies comme flubber ou GSAP MorphSVG.

Les animations SVG sont-elles meilleures que les GIF ? +

Oui. Le SVG est vectoriel (net à toute taille), léger (quelques Ko vs centaines de Ko pour un GIF), et contrôlable (pause, vitesse, couleurs via CSS). Un SVG animé fait 5-10x moins qu'un GIF équivalent.

Comment optimiser les performances des animations SVG ? +

Simplifiez les paths (moins de points), utilisez CSS pour les animations simples (transform, opacity), JS uniquement pour les animations complexes (morphing). Évitez d'animer des SVG complexes (>500 points) en boucle.

Peut-on animer des icônes SVG au hover ? +

Oui. Intégrez le SVG inline (pas en img), puis ciblez les éléments internes (path, circle, rect) avec CSS :hover sur le parent. Animez stroke, fill, transform. C'est la technique utilisée par les meilleurs sites.

Catégories similaires

✏️

Texte & Typo

56 effets

 🌊

Liquid & Morphing

30 effets

 🌄

Backgrounds

50 effets