Let me preface this post by saying that I love the way AI can help us accomplish many of the tasks we need to do to realise our design/development goals. Let me also say I love using SVG files in Pano2VR for their resolution independence and the flexibility they offer.

This tutorial will use Le Chat AI features to update SVG files developed in Adobe Illustrator.

What is Le Chat?

Le Chat is an AI assistant developed by Mistral AI, designed to provide helpful and accurate information, it doesn't generate real-time content or browse the web. It operates based on a mixture of licensed data, data created by human trainers, and data available up to its last training cut-off in November 2024. It excels in understanding and generating text but doesn't have personal experiences, feelings, or a physical presence and best of all it’s free (for now).

What’s in the Tutorial

In a majority of tours that have drone panoramas, the node hotspot in many cases is a small icon of a drone. When the icon is clicked the viewer is taken to that drone panorama.

In this tutorial, we will work from Adobe Illustrator files that have been saved as SVG files. We will extract the SVG code, upload it to Le Chat and prompt Le Chat to generate additional code that will apply a drop shadow and animate the drone blades.

Note: See below a sample of the original (left) and updated SVG (right)

Once we have added the drop shadow and animated the drone blades we will import the files into a Pano2VR project and use them as the icon elements in a new Point Hotspot Template.

We will expose the colors in the drone icon and apply new colors via the Edit Skin Configuration window.

Finally, we will add the new Drone Node Hotspot to a two-node tour using panoramic nodes generated in Skybox from Blockade Labs.

What is Skybox from Blockade Labs?

Skybox by Blockade Labs is a creative platform that enables users to generate immersive 360° AI-powered environments. It allows for the creation of customizable, interactive 3D worlds for gaming, virtual reality, and digital experiences. Users can craft stunning scenes effortlessly, enhancing storytelling and exploration through cutting-edge, accessible technology. (Figures #1 & 2)

Figure #1: Drone shot panorama generated in Skybox

Figure #2: Huts panorama generated in Skybox

Tutorial Files

The tutorial folder contains all the required files to complete the tutorial. There is a Pano2VR project folder: Project. The Asset folder includes files like the original Illustrator files, SVG files and panoramas generated in Skybox. (Figure #3)

download the tutorial files

The Illustrator Files

Although we won’t use the Illustrator files in the tutorial, I have included them for reference, as it’s important that they are as accurate as possible to ensure the animations work as expected. You can find them in the Assets/Illustrator folder.

To get started, the first step was to create a complete drone illustration with all its parts. Note that each ungrouped or grouped element in the drone-aligned-all.ai layers has been named; this is important and allows me to direct Le Chat to target specific layers. (Figure #4)

Figure #4: Drone file with all ungrouped and grouped elements named.

Once I had the finished illustration I removed the “prop-pins” group leaving just the “body” group. The “prop-pins” will be added as a separate file in the skin to allow mouse-over actions.

In order to apply a drop shadow I need a single element that represents all of the layers. Using the Pathfinder tool and the shape mode Unite, I created the “shadow” element. I saved the file as drone-aligned-base.ai (Figure #5)

By hiding all of the other layers the “shadow” element is revealed b. (Figure #6)

Finally I retrieved the original file and deleted everything except the “prop-pins” group and the individual “props”. (Figure #7)

The SVG Files

The files are located in the Assets/SVG folder.

The files are: drone-aligned-base.svg and drone-aligned-props.svg

The examples below are the svg files we will modify in Le Chat.

Adding Filters and Animation

Using our two .svg files shown above, we will add a drop-shadow to the drone-aligned-base.svg and rotate the blades on drone-aligned-props.svg

Note: If you don’t already have an account with Mistral AI, you can get started with my step-by-step tutorial on signing up for Mistral Le Chat.
You will also need a text editor. I will be using BBEdit but any text editor will do.

Step 1 Drop-Shadow -

1. Open the drone-aligned-base.svg file into a text editor (Figure #8 & 9)

Note: as the svg is quite complex there are a lot of lines of code. In the image below you can see the shadow element now defined by the id=”shadow”.

Note: we could copy and paste all the code into the Le Chat prompt. However, it takes a while for Le Chat to translate all of the code. In a test I performed it took 3.5 minutes to fully render all of the code.
As we only want to apply the shadow to the ID=”shadow” section, it’s faster to copy and paste just that section of code. In this test, it took just over 1.5 minutes.

2. Copy all the SVG code, but do not include the <g id="body"> tag and beyond. (Figure #10)

3. In Le Chat, paste the code into the prompt field.

4. Select Shift /Return and then enter the following prompt:

Add a dropshadow centered to the id=shadow, flood = black, deviation = 5, opacity = 1. (Figure #11)

The functions work as follows;

flood-color: Determines the color of the shadow.
stdDeviation: Determines the blurriness of the shadow.
flood-opacity: Determines the transparency of the shadow.

5. Select return or click on the “arrow” button

Le Chat will start rewriting the code to match our prompt. (Figure #12)

Figure #12: Le Chat updated the SVG code with “filter”

Roughly 1.5 minutes later, it will finish and provide an explanation of what was modified and what effect it has. (Figure #13)

Note: because we gave it just a section of code it has added in a closing </svg> tag. When we update the original code in our text editor we must be careful to remove this tag!

Figure #13: Finished code with additional </svg> tag and explanation.

6. Scroll back up to the top of the code block and click on the “copy” button. (Figure #14)

In the text editor, the block of code should still be selected.

7. Select paste to overwrite the old code. (Figure #15)

8. Delete the </svg> tag

9. Save the file as drone-aligned-base-shadow.svg

10. Drag the drone-aligned-base-shadow.svg onto a blank browser page.

Note: It will look like the example svg below with the drop-shadow visible.

Step 2 Blade Rotation Animation -

1. Open the drone-aligned-props.svg file into a text editor (Figure #16)

Note: There is not as much code in this SVG so we will copy all of it.

2. Copy all of the SVG code

3. In Le Chat, paste the code into the chat box.

4. Select Shift /Return and then enter the following prompt:

Using SVG SMIL animation, rotate each of the prop elements around their centres at a speed of .8 seconds

Note: SVG SMIL (Synchronized Multimedia Integration Language) animation is a way to create animations within SVG (Scalable Vector Graphics) files using the SMIL specification.

Some modern browsers have deprecated or removed support for SMIL animations in favour of CSS animations and the Web Animations API but at this time Pano2VR only recognises SMIL animation code.
In the comment Le Chat provided this explanation, “The centers of rotation (X, Y) are estimated based on the visual center of each propeller. You may need to adjust these values slightly to ensure the propellers rotate around their exact centers.”
After testing the code this the result …not what I was expecting!

In creating my Illustrator file, I carefully placed the centres of each blade at an exact position, as shown by the example of prop-tprt x: 140 Y: 60 in the image below. (Figure #17)

Figure #17: Illustrator file showing the centre position of the prop-tprt

The other prop centres were;

prop-tplft = 60 60
prop-btlft = 60 140
prop-btrt = 140 140

Reviewing the SVG code created by a “Save As..” from Illustrator, I could see it had a deviation in the code for prop-tprt of d="M138.3,54.6c. (x=138 y=54.6) and similar deviations for the other prop elements (Figure #18)

In the prompt I told Le Chat to use the centre of each blade so it uses the centre points defined in the code.

To resolve this, we need to prompt Le Chat that the centre points aren’t correct and provide it with the correct points.

So the prompt now becomes;

using SVG SMIL animation rotate each of the prop elements around their centres at a speed of .8 seconds.

The centre points aren't right. They should be;

prop-tprt = 140 60

prop-tplft = 60 60

prop-btlft = 60 140

prop-btrt = 140 140

After re-running the prompt, and updating the SVG code, we can see that the “rotate” positions are correct in the animation code. (Figure #19)

Figure #19: Updated code showing the correct “rotate” positions

6. Copy and paste the Le Chat code into the drone-aligned-props.svg file.

7. Save the file as drone-aligned-props-animation.svg.

The result will look like this, with all blades spinning around the centre point.

Drone Node Hotspot Template

Note: Now that we have our dropshadow and animating SVG’s finalised we can create the custom Drone Node Hotspot Template containing the combined svg’s, a tooltip and Actions to show the animation, show the tooltip and link to the target node.

1. Open the Assets/Project drone-view.p2vr file (Figure #20)

Note: we have two nodes, local-huts and drone-view and a skin drone-view.ggsk. The nodes have node hotspots assigned to them and targets have been set.

2. Click on Generate Output to view the tour (see below)

Note: clicking on the hotspot will take you from one node to the other but no other functionality has been added yet.

Open in a new browser window

3. Click on the Edit Skin button to open the skin.

Note: at this stage the skin is completely empty.

4. From the main menu, select Add Hotspot Template. (Figure #21)

5. Click on the skin to add it.

6. In the Properties panel, set the following:

Position
ID: drone-hotspot
Anchor: Centre
Position: X: 0 Y: 0

Appearance
Cursor: Hand

Actions
Source: Mouse Click
Action: Open Next Panorama
Parameters: $(hu)/$(ht)

Modifiers
Target: Scale
Source: Zoom
Factor: 1.00
Offset: 0.00 (Figure #22)

Figure #22: drone-hostpot Property Settings

7. From the Assets/SVG folder, drag the drone-aligned-base-shadow.svg onto the skin

8. In the Properties panel, set the following:

Position
ID: drone-base
Anchor: Centre
Position: X: 0 Y: 0 (Figure #23)

9. From the Assets/SVG folder drag the drone-aligned-props.svg onto the skin

10. In the Properties panel, set the following:

Position
ID: drone-props
Anchor: Centre
Position: X: 0 Y: 0 (Figure #24)

11. With the drone-props element selected, go to the Properties/SVG Image panel.

12. Click on Mouse Over: Change (Figure #25)

13. Navigate to the Assets/SVG/Drone folder and select drone-aligned-props-anim.svg and click open (Figure #26)

Note: the mouse over now contains the animated version (Figure #27)

14. Test the SVG files by opening the Live Preview (Figure #28)

15. Select the drone-base and drone-props elements and drag them onto the drone-hotspot element. (Figure #29)

Note: this will make them child elements of the drone-hotspot. Unfortunately, you cannot preview hotspot templates in the Live Preview.

16. Select Draw Text Box and click once on the skin

17. Drag the Text 1 element onto the drone-hotspot

18. With the Text 1 element selected in the Properties panel, set the following:

Position
ID: drone-tooltip
Anchor: Centre
Position: X: 0 Y: -100
Width: 100 px
Height: 30px

Appearance
Visible: unchecked
Visible Logic Block:

Trigger: Mouse Over Parent
Comparison: =
Value: true
Visible: true

Rectangle
Radius: 5

Text
Text: $(hs) (hotspot title placeholder)
Font: uncheck Default
Size: 16px
Align: Vertical: Center
Formatting: Check Auto Size
Padding: 5 (Figure #30)

18. Save the Skin

19. In the project window, select the Drone View node, select the hotspot and add the following settings to the Properties - Point Hotspot;

Skin-ID: drone-hotspot
Title: Drone View
Distance: check Auto Place/Lock Position (Figure #31)

Figure #31: Drone Point Hotspot settings

Note: if you want to see what the target view of the drone-hotspot is you can click on the “Target Viewing Parameters” button or command-click/cntrl-click on the hotspot to view the result.
You can change the pan/tilt/zoom in the window to set a new target view. (Figure #32)

Figure #32: Target view of drone-hotspot

20. Save the project and publish an output the tour

Open in a new Browser Tab

Note: after clicking on the Drone View hotspot the hotspot link to the huts is showing the drone animation. This is because we don’t have another Node Hotspot Template in the skin. In the next step we will add another node hotspot for the Huts. (Figure #33)

Figure #33: Node Hotspot to the Huts showing the drone animation

Hut Node Hotspot Template

1. Open the Skin Editor

2. Select the drone-hotspot element and copy it (Figure #34)

3. Click in the “Tree” panel and select Paste Element (Figure #35)

4. Delete the drone-props element and rename the other elements by changing the drone to “hut”. (Figure #36)

5. With the hut-base element selected, go to the Properties/SVG Image panel.

6. Click on Normal: Change (Figure #37)

7. Navigate to the Assets/SVG/Drone folder and select hut.svg, and click open. (Figure #38)

Note: the new SVG is loaded and visible visible in the skin. (Figure #39)

8. In the Properties panel, set the following:

Position
Size: Width: 130px Height: 130px (Figure #40)

9. Save the skin

10. In the project window, select the second node, “Local Huts”, to make it active.

11. Select the Point Hotspot, and in Properties - Point Hotspot, set the following;

Skin-ID: hut-hotspot
Distance: check Auto Place/Lock Position (Figure #41)

Figure #41: Set Properties - Point Hotspot

12. Save the project and republish. The result should look like the example below.

Expose Colors - Drone SVG

In this final stage, we will expose the colours on the drone-base element to replace them with colors more applicable to the scene.

1. Open the Skin Editor

2. Select the drone-base element

3. Click on the Color Tool to open the Change Colors window (Figure #42)

Note: this window displays all of the colors associated with elements that go to make up the SVG file.

4. Right-click on the first colour, and from the dropdown menu, select Expose Color As > New… (Figure #43)

5. In the Expose Color window enter the following;

Title: drone-shadow
Check With Alpha

Click Okay (Figure #44)

6. Repeat with the other colors shown in the image below and click Apply. (Figure #45)

7. Repeat with the drone-props element as shown below. (Figure #46)

8. Shift select both of the tooltip elements and expose the colors as shown below (Figure #47)

Note: multiple elements can be selected at the same time and have their colors exposed.

9. Save the Skin

10. Open the Edit Skin Configuration window and replace the colors with your own selections. (Figure #47)

11. Select OK

12. Save the project and republish

Note: now the drone reflects the color changes made.

Summary

I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.

I'd like to Donate

Using Ai to create Animated SVG's