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.
Required Setup
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- Make sure the Draw SVG block is activated, to verify this visit Nexter Blocks → Blocks → and Search for Draw SVG and activate.
How to activate the Draw SVG Block?
Go to
- Nexter Blocks → Blocks
- Search the block name and turn on the toggle then click Save Settings.
Key Features
- SVG Draw Animation – You can create an SVG draw animation.
- Custom SVG – You can create a draw animation with custom SVG.
- 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.
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 – This is our global extension available for all our blocks. From here you can add a custom CSS class in the Additional CSS class(es) field. If you know CSS you can use this class to further finetune the style by using your own custom CSS.
Advanced options remain common for all our blocks, you can explore all it options from here.
