Header Ads Widget

Christmas tree drawing

My codding spot December 04, 2021

This post is about how to draw Christmas tree using HTML SVG graphics with animation.


Precap

  • SVG introduction
  • Christmas tree drawing step by step 
  • Different shapes of Christmas tree drawing with svg
      1) Triangle 
      2) Rectangle
      3) Square
      4) Circle
      5) Star
      6) Text writing.


Let's start with first step to gather information about SVG.

What is SVG?

• SVG stands for Scalable Vector Graphics.
• To draw graphics on web HTML <svg> tag is used. You can define different types of shapes between <svg></svg> element.
• The <svg> tag contains height and width attributes without these two attributes your graphics can not be display on screen.

• Syntax of SVG element:-
<svg height=”value” width=” value”>
</svg>

Steps to draw Christmas tree using SVG

To draw Christmas tree I have combined multiple shape together like triangles, rectangle, star, circles and squares.

First, specify <div class=”box”> for background.

1) Drawing christmas tree leaves using <polygon>

In HTML SVG polygon points defines triangle shape. This polygon points are defined in pair of  X-axis and Y-axis pairs. 

Syntax:-

<svg width="value" height="value">
<polygon points="p1,q1 p2,q2 p3,q3..." style="fill: color;">
</svg>

Where p1, q1 are starting points, p2, q2 are ending points and p3,q3 are middle points.(for triangle shape)

The style attribute defines styles for shape like color, stroke, etc..

I have draw five triangles and merge them and fill with green color. I used negative margins to moves them opposite direction.

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="triangle1">
<svg height="500" width="500">
<polygon points="200,250 350,250 275,200" style="fill:rgb(0,120,0);">
</svg>
</div>
<div id="triangle2">
<svg height="500" width="500">
<polygon points="200,250 350,250 275,200" style="fill:rgb(0,120,0);">
</svg>
</div>
<div id="triangle3">
<svg height="500" width="500">
<polygon points="200,250 350,250 275,200" style="fill:rgb(0,120,0);">
</svg>
</div>
<div id="triangle4">
<svg height="500" width="500">
<polygon points="200,250 350,250 275,200" style="fill:rgb(0,120,0);">
</svg>
</div>
<div id="triangle5">
<svg height="500" width="500">
<polygon points="200,250 350,250 275,200" style="fill:rgb(0,120,0);">
</svg>
</div>

CSS
1
2
3
4
#triangle1,#triangle2,#triangle3,#triangle4,#triangle5{
margin-top:-470px;
margin-left:-75px;
}

Output
SVG Christmas tree leaves drawing using polygon points
SVG Christmas tree leaves drawing 



2) Drawing christmas tree trunk using <rect>

Syntax:-

<svg height=”value” width=”value”>
<rect width=”value” height=”value” style=”fill:color-value;”>
</svg>

I have put trunk in rectangle shape close to last triangle and set its position in middle. Now our Christmas tree is ready.

Note:-Specify all shapes between <div> </div> elements to overlap with each other. Without <div> element the <svg> element acquire space around it and all triangle display far.

HTML
1
2
3
4
5
<div class="rect">
<svg height="300" width="300">
<rect width="20" height="40" style="fill:rgb(225,90,45);">
</svg>
</div>

CSS 
1
2
3
4
.rect{
margin-top:-255px;
margin-left:190px;
}

Output
SVG Christmas tree drawing
SVG Christmas tree drawing 



3) Drawing Baubles using <circle>and <rect>

Drawing Circle

Syntax:-

<svg height=”value” width=”value”>
<circle cx=”distance from X-axis” cy=”distance from Y-axis” r=”radius” style=”fill: color-value;”>
</svg>

Where, cx and cy specify the distance from X-axis and Y-axis and r specify radius of circle.

I have put tiny squares at top of all the circles, so it looks as baubles and put them at corner of triangles.

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="square1">
<svg height="300" width="300">
<rect width="7" height="5" style="fill:rgb(225,215,0);">
</svg>
</div>
<div class="circle1">
<svg height="200" width="200">
<circle  cx="60" cy="65" r="10" style="fill:rgb(255,0,0);">
</svg>
</div>
<div class="square2">
<svg height="300" width="300">
<rect width="7" height="5" style="fill:rgb(225,215,0);">
</svg>
</div>
<div class="circle2">
<svg height="200" width="200">
<circle  cx="60" cy="65" r="10" style="fill:rgb(255,0,0);">
</svg>
</div>
<div class="square3">
<svg height="300" width="300">
<rect width="7" height="5" style="fill:rgb(225,215,0);">
</svg>
</div>
<div class="circle3">
<svg height="200" width="200">
<circle  cx="60" cy="65" r="10" style="fill:rgb(255,0,0);">
</svg>
</div>
</div>
<div class="square4">
<svg height="300" width="300">
<rect width="7" height="5" style="fill:rgb(225,215,0);">
</svg>
</div>
<div class="circle4">
<svg height="200" width="200">
<circle  cx="60" cy="65" r="10" style="fill:rgb(255,0,0);">
</svg>
</div>

CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.square1{
margin-top:-405px;
margin-left:130px;
}
.circle1{
margin-top:-355px;
margin-left:74px;
}
.square2{
margin-top:-85px;
margin-left:130px;
}
.circle2{
margin-top:-355px;
margin-left:74px;
}
.square3{
margin-top:-255px;
margin-left:260px;
}
.circle3{
margin-top:-355px;
margin-left:204px;
}
.square4{
margin-top:-85px;
margin-left:260px;
}
.circle4{
margin-top:-355px;
margin-left:204px;
}

Output
SVG Christmas tree with baubles
SVG Christmas tree with baubles



4) Drawing star using <polygon>

You can also draw star using polygon points. To draw star, I have specify five pairs of X-axis and Y-axis of polygon points and set it’s position at the top of Christmas tree.

HTML
1
2
3
4
5
<div class="star">
 <svg height="200" width="200">
  <polygon points="30,10 15,50 60,20 5,25 50,50"  style="fill:rgb(255,215,0);" />
</svg>
</div>

CSS
1
2
3
4
.star{
margin-top:-310px;
margin-left:168px;
}

Output
SVG Christmas tree 🎄 drawing
SVG Christmas tree 🎄 drawing 



5) Writing text “Merry Christmas” using <text>

At the bottom of the Christmas tree written text “Merry Christmas”.

Syntax:-

<svg height="value" width="value">
<text fill="color-value" font-size="value" font-family="type of fonts" x="distance from X-axis" y="distance from Y-axis">text to display</text>
</svg>

Where, you can specify style rules for text. The x and y attributes specify distance from X-axis and Y-axis respectively.

HTML
1
2
3
<svg height="500" width="500">
<text fill="#ff0000" font-size="40" font-family="cursive" x="45" y="90">Merry christmas</text>
</svg>

Output
SVG Christmas tree 🎄
SVG Christmas tree 🎄


An animation effect added on circles and text.
Below is the full source code and final output

Complete source code of SVG Christmas tree 


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
<title>Christmas tree drawing</title>
<style>
.box{
height:300px;
width:400px;
background-color:#000000;
}
#triangle1,#triangle2,#triangle3,#triangle4,#triangle5{
margin-top:-470px;
margin-left:-75px;
}
.rect{
margin-top:-255px;
margin-left:190px;
}
.square1{
margin-top:-405px;
margin-left:130px;
}
.circle1{
margin-top:-355px;
margin-left:74px;
}
.square2{
margin-top:-85px;
margin-left:130px;
}
.circle2{
margin-top:-355px;
margin-left:74px;
}
.square3{
margin-top:-255px;
margin-left:260px;
}
.circle3{
margin-top:-355px;
margin-left:204px;
}
.square4{
margin-top:-85px;
margin-left:260px;
}
.circle4{
margin-top:-355px;
margin-left:204px;
}
circle{
animation-name:opacity;
animation-duration:5s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes opacity
{
from{opacity:0.5;}
to{opacity:1;}
}
.star{
margin-top:-310px;
margin-left:168px;
}
text{
animation-name:colorchange;
animation-duration:5s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
@keyframes colorchange{
from{fil:#ff0000;}
to{fill:#fff000;}
}
</style>
</head>
<div class="box">
</div>
<!--triangles drawing-->
<div id="triangle1">
<svg height="500" width="500">
<polygon points="200,250 350,250 275,200" style="fill:rgb(0,120,0);">
</svg>
</div>
<div id="triangle2">
<svg height="500" width="500">
<polygon points="200,250 350,250 275,200" style="fill:rgb(0,120,0);">
</svg>
</div>
<div id="triangle3">
<svg height="500" width="500">
<polygon points="200,250 350,250 275,200" style="fill:rgb(0,120,0);">
</svg>
</div>
<div id="triangle4">
<svg height="500" width="500">
<polygon points="200,250 350,250 275,200" style="fill:rgb(0,120,0);">
</svg>
</div>
<div id="triangle5">
<svg height="500" width="500">
<polygon points="200,250 350,250 275,200" style="fill:rgb(0,120,0);">
</svg>
</div>
<!--rectangle drawing-->
<div class="rect">
<svg height="300" width="300">
<rect width="20" height="40" style="fill:rgb(225,90,45);">
</svg>
</div>
<!--Bauble drawing-->
<div class="square1">
<svg height="300" width="300">
<rect width="7" height="5" style="fill:rgb(225,215,0);">
</svg>
</div>
<div class="circle1">
<svg height="200" width="200">
<circle  cx="60" cy="65" r="10" style="fill:rgb(255,0,0);">
</svg>
</div>
<div class="square2">
<svg height="300" width="300">
<rect width="7" height="5" style="fill:rgb(225,215,0);">
</svg>
</div>
<div class="circle2">
<svg height="200" width="200">
<circle  cx="60" cy="65" r="10" style="fill:rgb(255,0,0);">
</svg>
</div>
<div class="square3">
<svg height="300" width="300">
<rect width="7" height="5" style="fill:rgb(225,215,0);">
</svg>
</div>
<div class="circle3">
<svg height="200" width="200">
<circle  cx="60" cy="65" r="10" style="fill:rgb(255,0,0);">
</svg>
</div>
</div>
<div class="square4">
<svg height="300" width="300">
<rect width="7" height="5" style="fill:rgb(225,215,0);">
</svg>
</div>
<div class="circle4">
<svg height="200" width="200">
<circle  cx="60" cy="65" r="10" style="fill:rgb(255,0,0);">
</svg>
</div>
<div class="star">
 <svg height="200" width="200">
  <polygon points="30,10 15,50 60,20 5,25 50,50"  style="fill:rgb(255,215,0);" />
</svg>
</div>
<svg height="500" width="500">
<text fill="#ff0000" font-size="40" font-family="cursive" x="45" y="90">Merry christmas</text>
</svg>
<body>
</body>
</html>

Final output of SVG Christmas tree animation 




Summary

SVG graphics represent 2D graphics.
In this we have learnt about Christmas tree drawing using HTML SVG graphics. Using SVG graphics you can drawn any simple drawing as your choice.



Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments