Fundamentals

Buttons Text & Typography Forms Navigation & UI Loading

Design & Visuals

Backgrounds Glass & Morphism Visual Effects Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Depth Cursors

Gallery & More

Cards & Layouts Gallery & Media Data & Visualization Atmosphere Utilities
All Effects New Favorites Templates Blog Tips ✨ Go Premium

SVG & Generative Art

SVG animations, generative art, masks and clip-path.

Updated

How do you animate SVG, and why use it instead of a GIF?

SVG animations stay sharp at any size and weigh a few kilobytes. Line drawing animates stroke-dashoffset against stroke-dasharray, fills and colours use CSS transitions, shapes morph between paths that share the same number of points, and generative art such as flow fields is computed in JavaScript and drawn as SVG or canvas.

How to choose, performance and accessibility
  • Use Line Draw or Logo Draw to reveal a logo or an illustration, Animated Icons for interface feedback, and Perlin Flow Field or Geometric Tessellation as generative backgrounds.
  • Compared with a GIF, SVG is lighter, scalable and restylable in CSS.
  • Simplify complex paths, give meaningful graphics a title, and hide purely decorative ones from screen readers with aria-hidden.
  • Line Draw, Perlin Flow Field and Text Mask Video are free with their full code; the rest come with Premium.
Generator

Your SVGs, with volume

The effects below animate your SVGs flat. The SVG to 3D generator gives them thickness: drop your file, set the material and the edges, and the object spins. A PNG logo works too — it gets traced on the way in.

The preview and the image are free. The code comes with a subscription.

Open the generator

Line Draw

SVG path that progressively draws itself using stroke-dasharray and dashoffset.

CSS stroke-dasharray
View source code
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
/* Pure CSS — no JavaScript required */

Logo Draw

Complex logo drawing animation with multiple elements in sequence.

CSS Multi-layer

Morphing Shape

Shape that transforms into different geometries with CSS animation.

CSS Morphing

SVG Fill Animation

Shape that progressively fills with color from bottom to top.

CSS Clip-path

Animated Icons

Icons with subtle animations: checkmark and X that draw themselves.

CSS Icons

Path Following

Element that follows a defined SVG path using animateMotion.

SMIL animateMotion

SVG Text Draw

Text whose outline draws itself then fills with color.

CSS Text

Pulse / Heartbeat

SVG heart with heartbeat animation and pulse wave rings.

CSS Pulse

Rotating Gears

Interlocking gears rotating in opposite directions.

CSS Rotation

Wave Path

Animated wavy line with gradient and motion effect.

CSS Wave

Perlin Flow Field

Particles guided by a Perlin vector field.

Canvas Perlin Particles
View source code
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

Geometric mosaic with staggered animations.

CSS Grid Pattern

Recursive Circles

Concentric circles with pulsation effect.

CSS JS Recursive

Lissajous Curves

Harmonic curves in perpetual motion.

Canvas Math Curves

Voronoi Pattern

Voronoi diagram with gradients.

CSS Gradient Organic

Sine Wave Grid

Grid of dots animated in a sine wave pattern.

CSS JS Wave

Spirograph

Rotating rings creating hypnotic patterns.

CSS JS Rotation

Fractal Tree

Recursively generated fractal tree.

Canvas Fractal Recursive

Maze Generator

Maze generated with the recursive backtracking algorithm.

Canvas Algorithm Recursive

Cellular Automata

Conway's Game of Life - artificial life simulation.

Canvas Simulation Conway

PLAY

Text Mask Video

Text filled with an animated gradient simulating video.

CSS Text Gradient
View source code
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
/* Pure CSS — no JavaScript required */

Shape Clip Reveal

Content revealed through a circular shape on hover.

CSS Clip-path Hover

Image Mask Text

Image visible only through the text.

CSS Blend Text

Circular Reveal

Circular mask that expands from the mouse position.

JS Clip-path Interactive

SVG Clip Path

Complex SVG shape used as a clipping mask.

SVG Clip-path Shape

Gradient Mask Fade

Gradient mask for elegant fading edges.

CSS Mask Gradient

Moving Mask

Mask that follows the mouse movement.

JS Mask Mouse

Split Reveal

Split image that reveals on hover.

CSS Clip-path Split

Blob Mask

Organic blob shape used as an animated mask.

CSS SVG Mask Organic

Diagonal Clip

Diagonal clip-path animation with multiple layers.

CSS Clip-path Layers

Frequently Asked Questions

How to animate SVG line drawing in CSS? +

Use stroke-dasharray and stroke-dashoffset. Set dasharray to the total path length, dashoffset to the same value, then animate dashoffset to 0. The stroke draws progressively. Get the length with path.getTotalLength() in JS.

How to do SVG morphing? +

Morphing requires two paths with the same number of points. Animate the path's d attribute between the two shapes. In CSS, use a transition on d (supported in Chrome/Edge). In JS, use libraries like flubber or GSAP MorphSVG.

Are SVG animations better than GIFs? +

Yes. SVG is vector-based (sharp at any size), lightweight (a few KB vs hundreds of KB for a GIF), and controllable (pause, speed, colors via CSS). An animated SVG is 5-10x smaller than an equivalent GIF.

How to optimize SVG animation performance? +

Simplify paths (fewer points), use CSS for simple animations (transform, opacity), JS only for complex animations (morphing). Avoid looping animations on complex SVGs (>500 points).

Can SVG icons be animated on hover? +

Yes. Embed the SVG inline (not as img), then target internal elements (path, circle, rect) with CSS :hover on the parent. Animate stroke, fill, transform. This is the technique used by the best websites.

Similar Categories

✏️

Text & Typography

56 effects

 🌊

Liquid & Morphing

30 effects

 🌄

Backgrounds

50 effects