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

SVG & Generative Art

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

How do you bring your SVGs to life? These 30 SVG animations cover essential techniques: path drawing (stroke-dasharray), shape morphing, animated icons and interactive illustrations. Each animation is lightweight, vector-based and responsive by nature.

Line Draw

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

CSS stroke-dasharray

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

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

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

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
Hover me
Revealed!

Shape Clip Reveal

Content revealed through a circular shape on hover.

CSS Clip-path Hover

MASK

Image Mask Text

Image visible only through the text.

CSS Blend Text
Move & Hover
Magic!

Circular Reveal

Circular mask that expands from the mouse position.

JS Clip-path Interactive
Star

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
Move mouse
Hidden!

Moving Mask

Mask that follows the mouse movement.

JS Mask Mouse
CENTER
LEFT
RIGHT

Split Reveal

Split image that reveals on hover.

CSS Clip-path Split
BLOB

Blob Mask

Organic blob shape used as an animated mask.

CSS SVG Mask Organic
Hover
Layer 1
Layer 2

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