How to Create and Animate an SVG Image Using JavaScript

Install Inkscape

Download and install Inkscape, a free SVG editing tool, from https://inkscape.org.

Create a New SVG

Launch Inkscape. A blank document will open automatically.

Add Text

Select the Text tool from the left sidebar. Type your desired text, and adjust its font, size, and color.

(Example: The Nectar logo uses the "Georgia" font.)

Convert Text to Path

Select the text object. To make it animatable with JavaScript, you must convert it into paths: Go to Path > Object to Path or press Shift + Ctrl + C.

Ungroup Letters

Ungroup the newly created paths: Go to Object > Ungroup or press Shift + Ctrl + G.

Apply Dynamic Offset

Select all the individual letter paths and press Ctrl + J to apply Dynamic Offset.

Save the SVG

Save your work as an SVG file.

Optimize the SVG

Visit SVGOMG, upload your SVG file, and set the following options:

• Uncheck: Show original, Merge paths, Move attributes to parent group, Prefer viewBox to width/height, Remove viewBox.

• Keep all other settings checked.

Download Optimized SVG

After optimization, download the minimized SVG file.

Copy SVG Code

Open the optimized SVG file in a text editor and copy its entire content.

Update Splash Screen Page

Open the file /www/partials/screens/splash.html in your project. Locate the two <svg> elements (one for light mode and one for dark mode) and replace their contents with your copied SVG code.

Add Class to SVG

Add class="logo" to the <svg> element.

Add Stroke to Paths

Inside the SVG, find all the <path> elements. Each <path> will have a fill attribute (e.g., fill="#000000"). You must also add a stroke attribute with a color of your choice (e.g., stroke="#000000").

Set Animation Duration

Adjust the animation duration by changing:

let animationDuration = 2000;

Set it according to how fast or slow you want the animation to play.

That’s it! Your animated SVG is now ready to use! 🚀