Day 2: How to Build a Christmas Tree with SVG

How to use the polygon element

We can’t always use basic shapes to assemble our images. A polygon is the easiest way to draw a freeform shape. Polygons have a points property that sets a list of coordinates that are connected with straight lines.

We can me the crown of the tree from three triangles. We start with the one at the bottom, and we add it layer by layer.

-100, -200
0, 0 80, 120 -80, 120 0, 0 80, 120 -80, 120
200, 400 
<svg 
  width="200"
  height="400"
  viewBox="-100 -200 200 400"
>
  <polygon 
    points="0,0 80,120 -80,120" 
    fill="#234236" 
  />
</svg>
-100, -200
0, 0 80, 120 -80, 120 0, -40 60, 60 -60, 60 0, 0 80, 120 -80, 120 0, -40 60, 60 -60, 60
200, 400 
<svg 
  width="200"
  height="400"
  viewBox="-100 -200 200 400"
>
  <polygon 
    points="0,0 80,120 -80,120" 
    fill="#234236" 
  />
  <polygon
    points="0,-40 60,60 -60,60"
    fill="#0C5C4C" 
  />
</svg>
-100, -200
0, 0 80, 120 -80, 120 0, -40 60, 60 -60, 60 0, -80 40, 0 -40, 0 0, 0 80, 120 -80, 120 0, -40 60, 60 -60, 60 0, -80 40, 0 -40, 0
200, 400 
<svg 
  width="200"
  height="400"
  viewBox="-100 -200 200 400"
>
  <polygon 
    points="0,0 80,120 -80,120" 
    fill="#234236" 
  />
  <polygon
    points="0,-40 60,60 -60,60"
    fill="#0C5C4C" 
  />
  <polygon 
    points="0,-80 40,0 -40,0"
    fill="#38755B" 
  />
</svg>

Finally, we add the trunk of the tree as a rectangle.

<svg width="200" height="400" viewBox="-100 -200 200 400">
  <polygon points="0,0 80,120 -80,120" fill="#234236" />
  <polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
  <polygon points="0,-80 40,0 -40,0" fill="#38755B" />
  <rect x="-20" y="120" width="40" height="30" fill="brown" />
</svg>