# 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](https://jakearchibald.github.io/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:

```javascript
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! 🚀