Using the “SVG animation widget”, you can paste any SVG code and the widget will automatically animate it. You can also customize the delay and duration of the animation and can also style the icons.
Let’s look at each of the options in the “SVG Animation Widget” below.
Install SVG Animation Widget for Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “SVG Animation”
- Hover over the widget in the search results and click install
- Add your “SVG Animation” widget to any Elementor Page
Insert SVG Code
Insert your SVG code in the box
*Note:- The animation works only with icons that are stroked and not filled.
Set the delay time for animation to start in milliseconds.
Set the duration of the animation in milliseconds.
By turning it on the animation will occur on loop.
Copy SVG Code
You can put any SVG code but The SVG animation widget works best with the Nucleo APP icons pack.
Open the Nucleo App website>>Select icon with outline>>Select any icon>>click on code button
Now copy the SVG code as shown in the below image.
Alternately, you can use Adobe Illustrator to create your SVG.
Type any text using the Type Tool>> Get text to the default fill and stroke.
Right click on the text and click on create outlines. Go to File menu>>Document Setup>>Click on Edit Artboard
Under preset option select the Fit to Artwork Bounds.
Go to File menu>>Save As>>Select file type as SVG>>Click on the SVG Code>>Copy the code from the opened text file and paste into the widget.
SVG Animation Widget Styling
You can style the color, alignment, and width of the SVG icon in this section.
Here are some live use cases for the SVG Animation widget.