Updated: 10/02/2025: added anti-clockwise rotation to top left and bottom right propellers.

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)

Note: In the text editor, the block of code should still be selected. If not select it.

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.
Le Chat Comment: “In this SVG, each <path> element representing a propeller has an <animateTransform> element added. This element specifies a rotation animation around the center of each propeller. The from and to attributes define the start and end angles of the rotation, and the dur attribute sets the duration of one complete rotation to 0.8 seconds. The repeatCount="indefinite" attribute ensures that the rotation repeats indefinitely.”

5. Scroll back up to the top of the code block and click on the “copy” button.

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

6. Select paste to overwrite the old code.

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

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

WHAT!! 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 next prompt becomes;

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 updated code into the drone-aligned-props-rotate.svg file.

7. Save the file as drone-aligned-props-rotate-2.svg.

8. Drag the drone-aligned-props-rotate-2.svg onto a blank browser page.

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

Bendschneider Update 10/02/2025: This next section has been added after a comment posted by Harald Bendscheider alterted me to the fact that In a typical quadrocopter drone, the four propellers rotate in different directions to ensure stability and controllability. Here are the usual directions of rotation:

Front left propeller: Turns counterclockwise (CCW).
Front right propeller: Turns clockwise (CW).
Rear left-hand propeller: Turns clockwise (CW).
Rear right propeller: Turns counterclockwise (CCW).

This combination ensures that the torques generated by the propellers are balanced, allowing the drone to fly stably.

Note: I’d like to thank Harald for his feedback, as this only makes our final work better and better.

Step 3. Blade Rotation Update

1. To fix the direction we will enter the following prompt:

The direction of the prop-tplft and the prop-btrt should be counterclockwise

Le Chat Comment: In this updated SVG, the from and to attributes for the prop-tplft and prop-btrt propellers have been reversed to achieve a counterclockwise rotation. The other propellers (prop-tprt and prop-btlft) will continue to rotate clockwise.

2. Copy and paste the updated code into the drone-aligned-props-rotate-2.svg file.

3. Save the file as drone-aligned-props-anim.svg.

4. Drag the drone-aligned-props-anim.svg onto a blank browser page.

Note: The result will look like this, with the correct rotation applied to the propellers.

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
URL: Hotspot URL
View: Target View

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 hotspot. 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.

Open in a new browser tab

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. For the drone-center and drone-hightlight you can use the existing exposed colors, for drone-blades use Expose Color as…new (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 & 48)

11. Select OK

12. Save the project and republish

Note: now the drone reflects the color changes made.