> For the complete documentation index, see [llms.txt](https://pmsgz.gitbook.io/nectar/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pmsgz.gitbook.io/nectar/tutorials/how-to-create-and-animate-an-svg-image-using-javascript.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.