How to Create an SVG Character

Duration: 10:49

In this video, you’ll learn how to create an SVG character from scratch using SVGator. We'll explain step by step how to create this cute coffee-cup character, using the basic shapes and the Pen Tool. So let’s begin!

Step 1 - Setting up the project

I’ll start my project by setting up the color for my background. I already have the color code in my clipboard, so I'll just paste it right here.

Next, I need to turn on the grid on my canvas, for more precision when drawing, and the “Snap to Grid” option enabled as well.

I’ll just create more room on my stage by reducing the height of the timeline, and zoom in on the canvas a little.

Step 2 - Create the character's body

Great! Now, let's start drawing the coffee cup right here in the center.

To do so, I need to select the Ellipse from the shapes menu and start drawing it from the center while holding down the Alt key, and also the Shift key to be able to obtain a perfect circle. There.

Now from the shapes menu, I’ll select the rectangle, and I want to make it the same width as the circle. The Snap to Grid option comes in very handy for this, and I can draw the rectangle precisely.

The width and height can also be changed from those inputs, here. I will only change the height to 120 pixels for now.

Now I have a circle and a rounded rectangle which I’ll use to create the shape of the coffee cup by uniting them.

I have to drag the rectangle to partially cover the circle.

It will snap to the median line of the circle, but for seamless edges in the final shape, I'll bring it down by two more grid units. There.

With both of them selected, I’ll go here to the boolean options and choose Union. This will merge the circle and the rectangle into a new single shape.

Now, in the Appearance panel, I'll set the fill to white for better contrast with my yellow background.

Great! We have completed the first step: Creating the body of the coffee-cup character!

To keep things clear and organized, I’ll double-click on the element, here, and rename it to…. “Body”. And press Enter.

Step 3 - Create the character's face

Now I’ll go ahead and create the face of the character, starting with the eyes.

So I’ll create a new ellipse, which I’ll draw it riiiiight here… this time without holding down Alt or Shift, because I don’t need it to be a perfect circle.

I want to change its size to 5 pixels width by 10 pixels height, and also set its fill color to black.

Now I’ll select the Transform Tool and make sure the origin is centered, by clicking on the Center Origin button here.

For the second eye, I’m simply going to copy and paste this small ellipse, right-click on it, and choose Copy.

Then right-click again and Paste.

Now I just have to drag the copy away a little just like this. (To make sure you move it perfectly horizontally, hold down Shift while dragging it.)

Now that we’re done with the eyes, let’s bring a smile to our little friend here!

For that, I’ll need the Pen tool which I’ll use to draw a curved line.

I’ll start with the first point here, below the left eye by clicking and holding, then I release the click after I place the bezier handle one grid unit under the starting point.

Now I’ll go two more grid units to the left, to place the second point.

Click and hold again, while dragging the bezier handle up one grid unit.

Press A on your keyboard to switch to the node tool, so you can edit the nodes and beziers.

Now I’ll make some minor adjustments to the line by moving the bezier handles 3 grid units, horizontally, towards the center of the path to make the smile look more uniform.

I want to make the line the same color as the eyes, so I’ll go to the Stroke Color, here and choose the black color.

Also, I want to have it with rounded ends, so I’ll click here, on this icon.

You can also click on the rounded joins if you want, and set the stroke width to 4 pixels.

Now let’s adjust its position a little, there. Let me adjust the position for the whole face as well, good.

I’ll now make the cheeks. Of course, I’ll use the ellipse tool again to create a circle right here. And set the fill color to pink.

To create a copy, you can also use the keys Control or Command + D, on your keyboard, and you’ll create a duplicate of the selected object. Just like this.

I’ll drag it now to the other side of the face, and make sure they are perfectly aligned horizontally.

I want those cheeks moved up a little I’ll just disable the Snap to Grid real quick, and move them up half a grid unit.

I want to create a group with all the face elements, so for that, I’m going to select them from the elements list, Right-click, and Group.

Then double-click on the group and name it “Face”.

Great! So now we have the body and face of our coffee-cup character.

Step 4 - Create the character's legs

Next, I’ll continue with the legs.

For that, I’ll use the Pen tool to draw a simple leg. I’m holding down the Shift key to make sure my line is perfectly vertical or horizontal... aaand, done.

Now I’ll just set its stroke color to black, enable the Rounded Ends and Joins, and set the stroke width to 5 pixels.

I’ll create a copy of this path for the second leg, which I’ll flip horizontally by clicking this button here.

I need the legs behind the body, so with both of them selected, I’ll drag them down in the elements list, right below my “Body” element.

Let's rename them real quick “Left leg” and “Right leg”.

Step 5 - Create the character's arms

Now let’s go ahead and make the arms.

I’ll need the Pen tool again to draw a curved path for the arm. And also another line for the hand here.

It kind of looks like a twig, but that’s all right because I want to keep a minimalistic style.

With both of the paths selected, I’ll apply the same stroke settings as for the legs: black color, roundness, and 5 pixels for the stroke width.

I’ll now group them and name the group “Right Arm”.

For the left arm, I’ll just copy and paste it, and of course, rename it accordingly as “Left Arm”.

Then flip it horizontally and place it on the left.

I need to place this arm behind, so I’ll drag it under the Body element. There.

Step 6 - Create the character's shadow

Let’s create a shadow underneath our character.

That will be another ellipse with a size of 200 by 30 pixels. Set a desaturated orange for the fill color and place it last in the elements list. Name it “Shadow”.

I think it is a little too wide so I’ll go to the transform properties and scale it down on the X-axis to 0.9, which is the same for 90%.

Step 7 - Add finishing touches

Next, I’ll draw the handle, which will be a circle of 80 by 80 pixels.

I don’t need any fill color for it so I’ll just set it to none, but instead, I need the stroke to be white, and also thicker, 26 pixels will be fine.

I just need to place it now in the right spot and bring it behind the Body element.

All that’s left now is to draw some coffee splashes.

And again, I’ll use the ellipse tool to draw a circle (of course, while holding down the Shift key).

Then create a copy of it, which I’ll choose a different color for, so I can distinguish it.

Now with both of them selected, I’ll use the subtract option to make a cut in the first circle, using the second one. Like this. I’ll also make it black before going any further.

Now I need to round up those pointy parts. For that, I’ll grab the Node tool from the tools menu, and select these two nodes, then click on the 4th asymmetric node type here.

Notice how the beziers changed, allowing me to edit the shape easily, and get a more organic aspect for it.

I’ll make some adjustments here, moving the nodes and tweaking the beziers until this shape will look like coffee sloshing inside the cup.

Working a little on the beziers of the middle node too, trying to keep it uniform and symmetric. There, this is good enough.

Bring it down a little, I’ll name the shape “Coffee”, and place it behind the Body element.

Actually, let’s hide it entirely behind the cup.

Now I want to place the Origin point center-top (oh, let me disable the Snap to Grid) there.

The element will always rotate around its origin point, and placing it center-top will help in the animation process.

We’re almost done. The last thing I want to add is a drop of coffee right next to the splash I just drew.

I’ll simply create another circle, and color it black.

And place its origin point at the same position as the origin of the splash, so it can be rotated the same.

That’s it!

This is how you create a character in SVGator. In the next tutorial, I’ll show you how simple it is to animate it and bring this coffee cup to life.

Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!

Related tutorials to help you out: