Splash Screen
Animating Splash Screen
Install InkScape (SVG Editing Tool). You can download from https://inkscape.org
Open Inkscape, a blank document is opened.
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.
Now, select the text object. To make the text animatable using JS, we will need to convert the selected text into path.
So, to convert text into path, apply Path > Path to Object or press Shift + Ctrl + C.
Ungroup it, Object > Ungroup or press Shift + Ctrl + G.
Select all the ungrouped (individual) letters and apply Ctrl + J (Dynamic Offset).
Save the SVG file.
Now we will need to optimize and minimize the SVG file. So, go to https://jakearchibald.github.io/svgomg, upload the SVG.
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
Then, download the optimized SVG file.
Now open the optimized SVG file in a text editor, copy its content.
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.
Add class="logo" to the element.
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.
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.
Last updated