SVG Line Draw

Looking for a creative way to animate SVG paths on your Elementor site? Check out Happy Addons’ new ‘SVG Line Draw’ widget. This free widget lets you effortlessly create smooth, line-drawing animations for SVG graphics, adding a dynamic visual touch to your content.

Requirements:

• Elementor plugin (Free)
• HappyAddons (Free)

Enabling SVG Line Draw:

1. Navigate to your WordPress dashboard.
   
2. Go to HappyAddons → Widgets.
   
3. Locate SVG Line Draw in the widget list.
   
4. Toggle the switch to Enable.
   

Once enabled, you can use the widget directly within the Elementor editor to animate your SVG graphics.

Using the SVG Line Draw Widget

1. Open your existing page with the Elementor Page Editor.
   
2. In the Elements panel, search for “SVG Line Draw.”
   
3. Drag and drop the widget to the desired section of your page.
   

You can now upload your SVG file and customize the animation settings to control how the lines are drawn on scroll or load.

SVG Line Draw – Content Settings

Under the Content tab of the SVG Line Draw widget, you can configure the following settings:

1. SVG Type:
You will get Font Awesome and Custom SVG Code options here. 

• Font Awesome – If you choose Font Awesome from the SVG Type dropdown, you can choose an icon from the Font Awesome Icon library or upload an SVG file.

If you choose the Icon Library option, a pop-up window will appear allowing you to select any icon from the Font Awesome library.

If you select Font Awesome as the SVG type, you can adjust the SVG Size and Alignment under the Font Awesome options.

Custom SVG Code:
If you select Custom SVG Code from the SVG Type field, an SVG Code field will appear where you can paste any SVG image code. (You can use sites like “SVG to Code” to convert an SVG image to code.)

Note: Your SVG code must include a valid shape element such as path, circle, or rect to enable animation.

SVG Draw Animation Settings

To enable SVG draw animation for your SVG image, follow the steps below:

Enable SVG Draw
Under the SVG Type section, you’ll find the Enable SVG Draw toggle. Turn this on to activate the SVG path animation feature.

• Start Point
  Once SVG Draw is enabled, you’ll see the Start Point option. This allows you to define the starting point of the animation as a percentage (e.g., 0% for the beginning of the path).
  

Reverse Animation
Enable the Reverse Animation toggle if you want to animate the path in reverse. When this is turned on, you’ll be able to set the End Point of the animation as a percentage (e.g., 100% for the full path length).

Draw Behavior

Under the Reverse Animation option, you will find the Draw Behavior dropdown. This allows you to control when the SVG animation is triggered. Available options include:

• Draw on Viewport Visibility – Animates the SVG when it becomes visible in the viewport.
  
• Draw on Scroll – Triggers the animation as the user scrolls.
  
• Draw on Hover – Starts the animation when the user hovers over the SVG element.

Draw on Viewport Visibility

If you select Draw on Viewport Visibility from the Draw Behavior dropdown, additional configuration options will appear:

• Start Trigger: Choose when the animation should start. Options include: Custom Position, Top Edge of the Widget and Center Point of the Widget.
• Draw Speed: Set the speed of the draw animation. A higher value results in a longer animation duration.
• Loop: Enable the Loop toggle to repeat the animation continuously. Once enabled, you’ll see:
• Loop Repeat Delay: Set the delay time before the animation repeats.
• Swing Effect: Enable this toggle to add a swing motion to the repeated animation for a smoother visual effect.
• Restart Animation: To restart the animation, you can enable this toggle button

Draw on Scroll

When you select Draw on Scroll from the Draw Behavior dropdown, the following settings will be available:

• Offset (%): Set how far the element must scroll into view before the draw animation starts. The value is a percentage of the viewport height.
  
• Draw Speed Factor: Control the speed of the draw animation. A higher value results in a slower animation.
  

Draw on Hover

When you select Draw on Hover from the Draw Behavior dropdown, the following settings will be available:

• Draw Speed: Controls the speed of the draw animation. A higher value results in a slower animation.
  
• Loop: Enable this option to repeat the draw animation continuously.
  
• Repeat Delay: Set the delay time before the animation repeats.
  
• Swing Effect: Enable this toggle to apply a swing animation effect.

Fill Color

Enabling this option will activate the After Draw Fill Color and After Draw Stroke Color controls under the Style tab.

Link

You can set a hyperlink for the SVG element here.

SVG Style Tab – Configuration Options

Under the SVG Style tab, you can customize the appearance of your SVG with the following options:

Stroke Color: Select the stroke (outline) color of the SVG.
Fill Color: Set the fill color of the SVG. (Make sure the Fill Color toggle is enabled from the Content tab.)
After Draw Stroke Color: Choose the stroke color that appears after the draw animation completes.
After Draw Fill Color: Choose the fill color that appears after the draw animation completes.
Stroke Thickness: Define the thickness of the stroke line.
Background Type: Solid Color or Gradient (Linear or radial gradients)
Border Type & Border Radius: Choose Border type and set corners for the SVG container.
Padding: Add inner spacing inside the SVG container. Values can be set per side or linked together.

Thats it.