# Splash Screen

## Animating Splash Screen

1. Install InkScape (SVG Editing Tool). You can download from <https://inkscape.org>
2. Open Inkscape, a blank document is opened.
3. Select Text tool from the left toolbar. Now write the text, set its font, size and color. The font used in Nectar logo is Georgia.
4. Now, select the text object. To make the text animatable using JS, we will need to convert the selected text into path.
5. So, to convert text into path, apply Path > Path to Object or press Shift + Ctrl + C.
6. Ungroup it, Object > Ungroup or press Shift + Ctrl + G.
7. Select all the ungrouped (individual) letters and apply Ctrl + J (Dynamic Offset).
8. Save the SVG file.
9. Now we will need to optimize and minimize the SVG file. So, go to <https://jakearchibald.github.io/svgomg>, upload the SVG.
10. Set the following parameters:

Keep these UNCHECKED: Show original, Merge paths, Move attrs to parent group, Prefer viewBox to width/height, Remove viewBox Keep all other parameters CHECKED

11. Then, download the optimized SVG file.
12. Now open the optimized SVG file in a text editor, copy its content.
13. Open /www/partials/screens/splash.html file, search for elements (There are two, one for light mode and other for dark mode). Replace these with the SVG you have copied.
14. Add class="logo" to the element.
15. Inside you will see a number of elements. These elements have fill="*COLOR*" attribute. Add stroke="*COLOR*" to these elements. *COLOR* can be in hex, rgb format. You can set their color according to your brand colors.

Please note that the element must have stroke property. Otherwise, the animation will not work.

16. Now we will need to set the animationDuration. Change let animationDuration = 2000; according to your needs.

That's all you need to create animated SVG.


---

# 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/ui-ux/screens/splash-screen.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.