# 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! 🚀


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pmsgz.gitbook.io/nectar/tutorials/how-to-create-and-animate-an-svg-image-using-javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.