Learn React VR (Chapter 6 | Vector Graphic Exploration)

Prerequisites

Chapter 1 | Hello Virtual World
Chapter 2 | Panoramic Road Trip
Chapter 3 | Outdoor Movie Theater
Chapter 4 | Transitions and Animations
Chapter 5 | Star Wars Modeling

Scope of This Chapter

In this chapter, I’m going to teach everything you need to know to get started to create vector graphics and export them as scalable vector graphics (SVG). Then, I will go over exporting a vector graphic and importing it into React VR. Finally, we will create an awesome polygon vector graphic to use as a panoramic image in our virtual world.

Note: When I refer to vector graphics, I am referring to graphics made out of shapes and shape manipulation through a GUI (i.e. Adobe Illustrator, Affinity Designer, etc.). When I refer to SVG, I am referring to the exported vector graphic from a GUI to a .svg file. We can’t import .svg files into React VR at the moment, but we can create vector graphics, export them as .png and .jpg files, and use them.

Getting Caught to Speed with SVG

SVG (scalable vector graphics) is a buzz word tossed around a lot within the space of frontend development, however, they are not all that simple to understand and work with. In fact, I have recorded a very lengthy video course just on scalable vector graphics alone that I plan on releasing later this year. There’s a whole lot that we could discuss.

I certainly don’t have all the time to unpack the ins and outs of working with SVG. However, I’ll do my best to provide a decent overview of what they are and the workflow for creating them.

What are they?

When we think of graphics on the web, we traditionally think about taking an existing image file (.png or .jpg) and placing it somewhere.

It’s almost like we are taking a sticker and slapping it on a web page. If we need to scale it, we essentially peel away the previous sticker and slap on a smaller one.

With SVG, there’s something completely different going. Instead of taking an existing file and slapping it on a web page, we are writing instructions for the browser to render multiple shapes that form a final graphic when put together.

If you look at the image above, you can see some of the SVG code on the left which is rendering the tiger made out of polygons on the right.

This code looks super intimidating. However, there is no need to write out any of the SVG code because there are software tools that allow us to create vector graphics through a GUI and export the final SVG code.

The cool part about this the graphic can be styled and animated dynamically.

For example, here is a picture of koala rendered by SVG code:

Let’s look at the code snippet that is highlighted above:

<ellipse id="Outer-Ear-Right" cx="343.8" cy="135.144" rx="85.56" ry="94.695" style="fill:#a6becf;"/

This is part of the coded instructions that is telling the browser to display the outer gray circle on the right ear of the koala.

If I update the fill (which is coloring in this outer circle with a gray color) to #FFFFFF then it becomes white:

Cool! This means we can control the styling of individual shapes of a graphic without code. Using some JavaScript magic, we can do dynamic styling and SVG animations. For example, here’s an animated Codepen editor I created:

Codepen Editor by Mike Mangialardi

Awesome!

But wait…it gets even better.

The scalable part in SVG refers to the fact these graphics can automatically scale and retain the proper height/width ratio no matter how a user adjusts the screen. This is awesome for modern, responsive web design.

Awesome! Another result of this is that SVG will never be fuzzy if the image is stretched past its original dimensions.

All of this to say, SVG have a tremendous amount of use cases on the web.

They can…

  • Replace traditional graphics even if static for the scaling benefits
  • Render beautiful animations
  • Make awesome section backgrounds of web pages
  • Replace traditional icons
  • & much more!

SVG in React VR

Initially, I was trying to be ambitious and get SVG to work in React VR. As I alluded to earlier, there is currently no default way or supplementary package for rendering SVG in React VR. I tried using the same methodologies for getting SVG to render in React Native with no success.

Nevertheless, I still want to include a nice tutorial on how to make vector graphics through a GUI and import them into React VR as .png and .jpg files. While we won’t have some of the cool benefits of SVG, we still can make use of nice vector graphics in a virtual web experience. Particular, we will be making a vector graphic that we can use for the Pano tag of our virtual world.

Creating Vector Graphics in a GUI

Tools of the Trade

When it comes to vector graphic software, there are really two major options: Adobe Illustrator and Affinity Designer.

I love Affinity Designer. It’s cross-platform and only a one-time fee of $50. I actually prefer it over Adobe Illustrator and not merely suggesting that it’s a decent alternative.

I highly, highly recommend the investment. I literally use it for everything (I even use it over Sketch).

Nevertheless, I can’t really demand/expect you to pick this up right this second.

Fortunately, there’s a free alternative that we can use called Gravit.

Go ahead and install this.

Vector Graphic Basics

Once you are ready, open a new file it dimensions of 1440 x 900 px right below the middle icon of the second row:

This opens a new canvas:

On this canvas, we can drag out different shapes and manipulate them. Making a good vector graphic is truly as simple as putting shapes together, making modifications to those basic shapes as needed, and applying a good color palette.

Let’s do this and explore the major features of the UI in the process (note that I’m only going to explain what’s important and not obvious).

First and foremost, the select tool (first blue icon) is used constantly to select and move shapes.

On the top toolbar, you can expand the third blue icon and see all the possible shapes:

Let’s select Rectangle and drag one out across our canvas:

Then, use the select tool to drag it into the horizontal and vertical center. You will notice that it snaps into place:

This is called snapping. You can see all the snapping options by expanding the red magnet icon:

You could also turn on a grid for a better understanding of how things can be laid out and snapped into place if you desire.

When the rectangle is selected, there are some important things appearing on the right side of the UI:

There are options to control appearance, fills, and borders. Note that the options will be different depending on the selected shape.

A few things to point out in particular:

Corner refers to the rounding down of our rectangle’s corners:

Fills refers to the color that fills in our shape. Let’s click on the circle to change the color/fill of our rectangle:

The cool thing here is that we can use hex codes. Using a tool like Coolors, you should have no issue getting good hex codes to use.

Trying pasting in the following:

#DF928E

We now see:

Cool!

Borders refer to the border that surrounds our rectangle.

Click the plus sign to add a border.

We can update the color and update the thickness like so:

This is the basic gist of making shapes. However, let’s look at some more complex use cases.

Wouldn’t it be cool if we can create our own shapes?

We can! Select the path tool which is the second blue icon:

Using this tool, you can click away on the canvas to form different nodes/ends of the custom shape and eventually close it off:

Then, you can use the subselect tool (expand the first blue icon):

This will allow you to move the nodes, curve paths between the nodes, and adjust the curves:

As we add shapes, we will see them appear on the layers panel:

The order of the layers controls the depth of the shapes.

If I moved down the ellipse, it would be placed on the bottom and therefore hidden by the larger rectangle:

You can also double-click the layers to rename them:

This will be very important when we get to the exporting process for our vector graphic.

Let’s wrap up the basics by looking at compound shapes. A compound shape is a shape created from multiple shapes.

There are 4 ways to create a compound shape. We can union, subtract, intersect, or divide multiples shapes to create a compound shape.

Draw out a rectangle if you don’t have one already and copy and paste to create another one.

Click one rectangle and overlap it with the other:

Then, go to Modify → Compound Shape → Union:

This combines the two rectangles into one:

Intersect will take the intersection between both shapes and make it the shape:

Subtract will subtract one of the shapes from the other:

Finally, difference will maintain two shapes and remove the overlap:


With the basics of creating vector graphics aside, it really comes down to practice in order to get better at making vector graphics. The best way to practice is to look at existing graphics on Dribbble, break the graphic into shapes and/or shapes with slight modifications, and try to recreate the graphic. Use Coolors, Dribbble, and Colorzilla for color choices. Then, start to use Dribbble as inspiration to create your own graphics. Once again, it’s all about practice, practice, and more practice.

For now, let’s create a vector graphic together.

Breaking Down Our Vector Graphic

Now, we want to create a vector graphic of a koala to use our new skills.

Before we do that, we need to break down the existing image we are seeking to replicate.

It may look complex, but it is really just a collection of simple shapes.

Let’s break this image down and then create the vector graphic.

Head

Our head will be a light-gray circle.

Ears

Our ears will each be two circles stacked on top of each other. We will have a larger light-gray circle on the bottom. Then, we stack a smaller dark-gray circle on top.

Also, notice that the ears are behind the head.

Eyes

The eyes will again be two circles on top of each other. One will be a large white circle and one a small black circle. Each eye will be on top of the head.

Nose

The nose will be a brown rounded-rectangle. It will set right on top of the eyes.

Hair

Our hair will be two light-gray triangles that sit at the top of the head.

That’s it! Pretty cool, right?

As you can tell, it is really just a few simple shapes but looks clean, cute, and bold!

Now, let’s make this vector graphic!

Creating Our First Vector Graphic

Clear your canvas in Gravit and let’s begin.

First, we drag and rectangle that covers the entire canvas. Give it the following fill:

#25A9FC

Then, drag out a circle and snap it in the middle of the canvas. Use the following fill:

#D3DAE0

Next, let’s create the outer left ear which will be a dark gray circle like so:

The fill is #A6BECF .

Then, we can create a light gray circle on top of the outer left ear to form our inner left ear. You can duplicate the outer left ear using CTRL + D and then use the select tool and hold SHIFT to shrink the duplicated ellipse while maintaining the same height/width ratio. The inner left ear should be slightly smaller than the outer left ear.

Snap inner left ear in the center of the outer left ear and use the following fill:

#D3DAE0

Select the outer ear left and inner ear left and holding SHIFT and clicking both. Then, we want to group these two together since they form a completed left ear when put together. To group these shapes, you can hit CTRL + G.

You can this has been grouped by looking at the Layers panel:

Now, we can duplicate this group (CTRL + D) to form our right ear.

To get it in the right location, make sure the duplicated ear is directly over the original ear:

Then, hold SHIFT and drag it horizontally until the distance is like this:

To make sure these ears are the same distance from the center, select both of them (hold SHIFT and click each) and drag them until you see the following:

Make sure both of the ear groups and selected and drag them just below the Ellipse in the Layers panel:

We should now see the following:

Group these ears together by clicking CTRL + G.

Deselect these ears and let’s drag out a white circle for the outer left eye:

Duplicate this ellipse and overlap the duplicated ellipse with the previous one. Select both of them and center them horizontally like so:

Then, duplicate the outer left eye and drag the duplicated ellipse while holding shift. This will form the left pupil so try to make it the quite a bit smaller than the outer left eye. Use #2A394c as the fill and center it:

Then, you can duplicate the left pupil, make sure the duplicate is directly over the original, and drag it into the center of the outer right eye:

Note that if the right pupil shows up behind the outer right eye then you will need to adjust the layering from the Layers panel.

Select the outer left eye and the pupil and group it to form the left eye. Do the same for the right eye and then group the left eye and right eye together.

Next, let’s drag out a rectangle with a fill of #BE8560 like so:

Then, select the nose and give it a Corner value of 42 in the Appearance panel:

Finally, you can drag out a left and right triangle to form the left hair and right hair. The triangle tool in Gravit allows you to rotate the triangle which is annoying but you want the bottom to be flat. Use you best judgment to get the left hair and right hair to look like the following:

Group the left hair and right hair together and our koala is complete!

Note: I was using the auto-generated colors from Dribbble which weren’t exactly the same as the original graphic. We will leave it as is.

Exporting Our Vector Graphic

At this point, you should have created your very first vector graphic which is a cute koala. Now, we are going to export out koala from Gravit to SVG code. We currently can’t import .svg files to React VR, but I want to still show you the process in case that changes.

Labeling Our Layers

Let’s start by labeling all the outermost layers like so (keep the capitalization):

Going another level down in our layers, let’s have the following names:

Going the next level down, let’s name the shapes that form our eyes and ears:

The column cuts it off but the naming convention for the eyes is [Left or Right] Pupil and Outer [Left or Right] Eye. The naming convention for the ears are Inner [Left or Right] Ear and Outer [Left or Right] Ear.

The naming of every label is a very important step when working with SVG. We will see the reason for this shortly.

Exporting as a SVG File

Now that our koala graphic is complete, go to File → Export → Canvas and hit export:

Save it locally as Koala.svg.

Extraction and Optimization

Our koala has been exported into .svg file.

Hold up…didn’t I say that SVG are all about coded instructions?

Yes, this .svg file contains code that contain the instructions.

We can use a tool called SVGOMG to see this code and optimize it.

Go to this tool and click Open SVG. Open the Koala.svg file:

This tool has taken our .svg file and optimized the file size by 51.87%. This is controlled by the Features panel which controls what unnecessary stuff is removed for optimization. Cool! Just make sure that Clean IDs is toggled off. Everything else can be left as the default.

Now, click on the CODE tab and we can now see the coded instructions:

Woah!

The entire svg tag contains our graphic and everything between is an individual shape:

<path fill="#BE8560" d="M719.5 435c23.456 0 42.5 18.92 42.5 42.225v84.55C762 585.08 742.956 604 719.5 604S677 585.08 677 561.775v-84.55C677 453.92 696.044 435 719.5 435z"/><path fill="#D3DAE0" d="M709.638 221.64l-79.052 1.642L668.69 154M809.414 236.36L730.362 238l38.105-69.282"/>

Recall, a path refers to a custom shape in the Gravit GUI. Technically, all shapes are a path but you could use a predefined tag for the shapes such as:

<ellipse>
<line>
<rect>
<polygon>

Usually, Affinity Designer retains these predefined tags for better organization but it looks like Gravit exports everything a path.

The g tags refer to the groups we formed:

<g>...</g> //example: ears

Important Note: I had us label our shapes and groups because Affinity Designer exports the shape tags with an id that is the same as the label name. For example:

<ellipse id="Left-Pupil">

This is critical because it allows us to apply dynamic styling and animations to individual shapes of our graphic with code.

It looks like Gravit does not do this which is a huge bummer. Again, I recommend getting Affinity Designer but we won’t need this feature for the rest of this chapter.


We have learned how to create vector graphics in a GUI and export them as .svg files. Since we can’t do anything with SVG in React VR, we will export our koala again as a .png file and display it in React VR. Then, we will create an awesome panoramic vector graphic to use as the panoramic photo in our virtual world.

Taking Vector Graphics to React VR

Creating a New Project

Let’s create a new project for our exploration with SVG called VectorGraphicPanoramic.

Change directories to wherever you want to save this project and run:

react-vr init SvgExploration

Once this finishes, open up the project in your code editor.

Exporting Our Koala

Let’s go back to Gravit and export our koala as a .png.

Go to File → Export, select canvas, and export as a .png file type:

Save it in the static_assets folder as koala.svg.

Importing Our Koala

Open index.vr.js and remove the Text component so we just have:

<View>
<Pano source={asset('chess-world.jpg')}/>
</View>

Then, let’s import the Image component:

import {
AppRegistry,
asset,
Pano,
Text,
View,
Image
} from 'react-vr';

Finally, let’s render our koala graphic with some inline styling:

<View>
<Pano source={asset('chess-world.jpg')}/>
<Image
style={{
height: 1,
width: 1.6,
layoutOrigin: [0.5, 0.5],
transform: [{translate: [0, 0, -3]}]
}}
source={asset('koala.png')}
/>
</View>

Note that I set the height as 1 meter and got width by calculating the ration of our canvas in Gravit like so :

1440/900 = 1.6 

cd into the project root, run npm start , and go to the local host:

Cool! Let’s take this to a whole ‘nother level.

Panoramic Vector Graphic

Here’s the part of this chapter that I am really excited about!

So far, we have been using equirectangular photos from Flickr for the panoramic image in our virtual worlds.

While these images require special 360-degree cameras and such, it’s not difficult to use vector graphics as a panoramic (although they aren’t nearly as crisp and cool). All we need to do is make sure the graphic has a width that is 2x the height and it will work.

Instead of doing a very basic example, however, I want to do something really cool. I want to make a polygon vector graphic.

A polygon vector graphic is simply creating an image only out of different colored polygons. For example, here’s a polygon tiger (left) I created from an existing image:

Creating that vector graphic took 10 hours but the process was a lot simpler than you might anticipate.

We are going to take the following panoramic image and turn it into a polygon vector graphic which we can then use in React VR:

This will not take nearly as much time as my highly-detailed tiger.

Creating the Polygon Panoramic

Create a new file in Gravit and give a dimension of 8000 x 4000:

Next, copy this photo and paste it into the canvas:

Stretch it over the canvas like so:

Then, select the path tool and update the fill to 0% and the border to white with a thickness of 20:

Then, create a triangle like so:

Click the select tool (v is the shortcut) and click outside of the canvas to reset the path tool.

You can continue to create triangles like this until we have filled up an entire row like so:

There is no right size or type of triangle to create. It is totally up to you. The randomness of the triangles is what makes it cool in my opinion. You can also do any polygon.

Once you have a row, select the first triangle/polygon from the left. Select the dropper icon next circle where we ordinarily select a color. This will allow us to use a color anywhere on the canvas as the fill.

Click anywhere in between the polygon with the dropper tool and you will see something like this:

Repeat this process for every polygon in the row:

Then, select every polygon (click the top and bottom path in the Layers panel while holding SHIFT):

While selected, change the border to 0% opacity and then click the trash icon:

While everything is still select, group them together.

Deselect everything and we will see this:

If we wanted to make thing really amazing, we would make much smaller triangles and do the same process. For now, we can just repeat this process until the sky is full. You can use the subselect tool to adjust nodes in order to close gaps if needed:

Once you are done, you should see something like this:

Zoom in and finish the rest with smaller polygons (reduce the thickness of the path tool if preferable):

Here’s my final product:

The idea is that if we were really detailed and made really small triangles, then we would have recreated the photo very realistically using polygons like my tiger. However, we made very large triangles to save time which is not very realistic. Nevertheless, it is really cool and we can use it to make a cool panoramic photo.

Group all the polygons together (not the image) and change the opacity to 51%:

Finally, let’s export the canvas as a .png file, call it poly-background.png, and save it in the static_assets folder.

To see this in React VR, update the Pano tag in index.vr.js like so:

<Pano source={asset('poly-background.png')}/>

Refresh the local host and we will see the following:

Take a look around. As you can see, it’s not nearly as clear and crisp as the equirectangular photo. However, it’s still a cool option when creating panoramic backgrounds for VR apps.

You can also use 3D models as a panoramic:

Oculus Video

While I’m not qualified to go through how to do this, it is something to also keep in mind for your own future exploration.

Final Code

Available on GitHub.

Concluding Thoughts

Hopefully, there is improvements to React VR to allow for SVG. In the meantime, I think this chapter has still brought great value and enough knowledge for additional exploration on your own.

Chapter 7

Chapter 7 is now available.

Support the Author

If you would like to support me as I write this book, you can purchase the book here.

The book is published through a platform called LeanPub which allows me to update my book as it progresses. Each time a chapter is added, you will be notified via email. The book will be free to read on Medium, however, purchasing it through LeanPub allows you to download the ebook as a PDF, EPUB, or MOBI file and helps support me financially.

Additionally, I have created a special package that will provide you with a secret link to a Discord server where you will be able to help influence how I write this book.

So go ahead and purchase this book on LeanPub if you would be so kind.


Cheers,
Mike Mangialardi
Founder of Coding Artist