---
title: "How to Create Draw SVG Animation in WordPress?"
url: https://nexterwp.com/docs/create-draw-svg-animation-in-wordpress/
date: 2024-12-05
modified: 2026-03-31
author: "Aditya Sharma"
description: "SVG animations are eye-catching and engaging, which can help make your website stand out from the competition. By incorporating these animations, you can create a more dynamic and visually appealing..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-Draw-SVG-Animation-in-WordPress_-1024x519.jpg
word_count: 471
---

# How to Create Draw SVG Animation in WordPress?

SVG animations are eye-catching and engaging, which can help make your website stand out from the competition. By incorporating these animations, you can create a more dynamic and visually appealing experience for your visitors.

With the Draw SVG block from Nexter Blocks, you can easily add SVG drawing animation to your WordPress website.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-draw-animated-svg-icon/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- Make sure the Draw SVG block is activated, to verify this visit Nexter → Blocks → and Search for Draw SVG and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=BmH1D0xCrqE

## How to activate the Draw SVG Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name and** turn**** on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/Nexter-Blocks-Draw-SVG-Activation.png)

## Key Features

- **SVG Draw Animation **- You can create an SVG draw animation.

- **Custom SVG **- You can [create a draw animation with custom SVG](https://nexterwp.com/docs/add-custom-animated-svg-icon-in-wordpress/).

- **Multiple Drawing Animation Style** - You can choose from multiple SVG drawing animation styes.

- **Hover Animation** - You can easily play the animation on hover.

- **Animation Loop** - You can play the animation in a loop forever.

## How to Use the Draw SVG Block?

Add the Draw SVG block from Nexter Blocks to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/draw-svg-design-type-1024x193.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

From the **SVG Options** section, you have to select the SVG type. Here you’ll find two options - 

- **Pre Built SVG **- With this option, you can use a pre-built SVG icon to create a drawing animation.

- **Custom Upload** - With this option, you can use a custom SVG file to create a drawing animation.

Select the option as per your requirements, let’s select Pre Built SVG Icon here.

Then from the **Select Svg Icon** dropdown, you have to select an icon.

From the **Max Width** section, you can set the maximum width of the SVG for responsive devices.

You can manage the SVG border color from the **Border/Stroke Color** section.

By enabling the **Fill Color** toggle, you can add a fill color to the SVG.

Then, from the **Type** dropdown, you can set a pre-defined SVG drawing style and its duration. Here you’ll find four different drawing styles.

You can select a drawing method from the **Draw Method** section. Here, you’ll find two options - 

- **On Scroll** - To play the animation when the SVG enters the viewport.

- **On Hover** - To play the animation on mouse hover.

Select the option as per your requirements.

Then, you can align the icon for different devices from the **Alignment** section.

Advanced options remain common for all our blocks, you can explore all the options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)