SVG Animations

PRO

Advanced SVG animation effects including drawing, morphing, transformations, and filters with physics-based controls

Pro Features

Unlock advanced capabilities with the Pro version

8 Animation Types

Draw, morph, fill, stroke, transform, path, mask, and filter animations

Advanced Options

Extensive customization for each animation type with dedicated option sets

Flexible Triggers

Auto, hover, click, scroll, and manual trigger support

Visual Effects

Built-in glow and shadow effects for enhanced visual impact

Physics-Based Easing

Natural motion with cubic-bezier and multiple easing functions

Loop Control

Precise loop control with count limits and infinite loops

Installation

Install via CLI

npx moonui-cli@latest add svg-animations

Usage

Pro Required

Hover to Draw

Examples

Animation Types Gallery

PRO

Explore all 8 animation types with different visual effects

Pro Required

Draw

Transform

Fill

Stroke

Filter

Path

Morph

Mask

Draw Animation Variations

PRO

Different path drawing orders and effects

Pro Required

Sequential

One path at a time

Parallel

All paths together

Random

Random timing

Transform Animations

PRO

Rotate, scale, translate, and skew transformations

Pro Required

Rotate 360°

rotate: 360

Scale & Rotate

1.5x + 180°

Complex

Multi-transform

Fill Direction Animations

PRO

Directional fills with gradient support

Pro Required

Left → Right

Right → Left

Top → Bottom

Bottom → Top

Stroke Animations

PRO

Advanced stroke drawing with width animation

Pro Required

Dash Offset

Standard Stroke

Animated Width

Growing Stroke

Complex Path

Pentagon Draw

Filter Effects

PRO

Dynamic blur, brightness, contrast, and color effects

Pro Required

Blur + Brightness

0→5px blur

Hue Rotation

360° rotation

Combined Filters

Multi-filter

Trigger Types

PRO

Different animation triggers: hover, click, scroll, auto

Pro Required

Hover Trigger

Mouse over to animate

Click Trigger

Click to toggle

Auto Play

Loops automatically

Easing Functions

PRO

Compare different easing functions for smooth animations

Pro Required

linear

ease-in

ease-out

ease-in-out

bezier

Glow & Shadow Effects

PRO

Add visual depth with glow and shadow effects

Pro Required

Glow Effect

intensity: 15

Shadow Effect

blur: 20px

Combined

Glow + Shadow

Interactive Icon Cards

PRO

Real-world examples with complex SVG icons and interactions

Pro Required

Layered Architecture

Sequential drawing animation for complex layer visualization

Hover to Animate

Continuous Processing

Rotating animation perfect for loading states

Interactive

User Engagement

Gradient fill animation for like/favorite actions

Hover to Fill