Drawing a cup using SVG Path Element

In this lesson we will learn to draw a cup using Cubic Bezier curves discussed in the previous SVG lesson. To draw a cup, the first thing we need to do is draw an ellipse. An ellipse is shown in the image below:



An ellipse can be drawn using two cubic bezier curves. The following code can be used to draw an ellipse using SVG:

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 18 45 C 20 25 224 25 224 45 C 224 65 20 65 18 45" 
style="stroke:black;fill:none;" />
</svg>

In the above code the path starts at co-ordinates (18,45), followed by the first cubic bezier curve with control points (20,25 and 225,25) curving it in upward direction and then the second cubic bezier curve with control points (224,65 and 20,65) curving it in downward direction.

Now the next shape we need to draw is shown in the image below:



To draw the above shape we need to draw two curves i.e a left curve and a right curve and a line joining the two curves.

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 22 40 C 0 50 40 250 60 250 L 180 250 
C 200 250 240 50 220 40" style="stroke:black;fill:none;" />
</svg>

You can see in the above code the path starts at (22,40) and not at (18,45) which are the starting co-ordinates of the ellipse drawn above, this is because we want to fit the ellipse inside the given shape. Then we have a cubic bezier curve with starting position same as the starting position of the path i.e (20,40) and ending at (60,250). To curve it a bit leftward the x-position of control points (0,50) and (40,250) is kept a little less than the x-position of the start and end points. After the first curve we have a straight line joining the first curve to the second curve and then we have the second curve which is the exact replica of the left curve except it's curve is in the opposite direction.

Now join the two shapes. Check the code given below:

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 18 45 C 20 25 224 25 224 45 C 224 65 20 65 18 45 
M 22 40 C 0 50 40 250 60 250 L 180 250 C 200 250 240 50 220 40" 
style="stroke:black;fill:none;" />
</svg>

The above code is only the merged version of the two shapes previously drawn separately. Now let us give the finishing touch to our cup by drawing the handle of the cup.

<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 18 45 C 20 25 224 25 224 45 C 224 65 20 65 18 45 
M 22 40 C 0 50 40 250 60 250 L 180 250 C 200 250 240 50 220 40
M 225 65 C 375 55 200 210 200 210 M 225 85 
C 345 60 190 200 206 190" style="stroke:black;fill:none;" />
</svg>

In the above code we have added only two more curves to the previous code to add a handle to the cup.

Stay tuned for more lessons...

Related Posts
Draw a glowing lamp using SVG
SVG Filter Effects
Drawing Paths in SVG
SVG Text Element And Attributes
Basics of SVG Graphics