SVG Animator Module for Divi

SVG Animator module allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available.

Features

Add stunning animations to your SVG images
The Divi Pixel SVG Animator is highly customizable and will help you add amazing animations to your SVG images using built-in module features.
N

3 Animation Types

N

Animation Duration

N

Path Timing Function

N

Animation Timing Function

N

SVG Alignment

N

Stroke Width & Color

N

Replay Animation on Click

Demo 1
Modern Architecture
Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdiet felis, sollicitudin vehicula purus nunc ut sem.
Demo 2

Welcome to Oktoberfest

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdiet felis, sollicitudin vehicula purus nunc ut sem.

Programme

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdie.

Beer

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdie.

Culture

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdie.

Reservations

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdie.

Events

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdie.

Music

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdie.

Demo 3
Animated Illustration
Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdiet felis, sollicitudin vehicula purus nunc ut sem.

Demo 4

Animated Icons
Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdiet felis, sollicitudin vehicula purus nunc ut sem.
Web Design

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdie.

Digital Marketing

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdie.

Branding

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdie.

Demo 5

I’m Sarah

Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdiet felis, sollicitudin vehicula purus nunc ut sem. Cras gravida ex nisl, in lobortis justo posuere sed. Sed in quam at massa bibendum tristique. Duis interdum, lorem ornare iaculis condimentum, arcu lectus imperdiet felis, sollicitudin vehicula purus nunc ut sem.

Animation Types

There are a variety of different animations available

Delayed

Every path element is drawn at the same time with a small delay at the start. This is currently the default animation.

Sync

Each line is drawn synchronously. They all start and finish at the same time, hence the name `sync`.

One by One

Each path element is drawn one after the other. This animation gives the best impression of live drawing.

p

Click the image to restart animation