We can’t always use basic shapes like circles or rectangles to assemble our images. This is the case if we want to draw this Christmas tree.

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 make the crown of the tree from three triangles. We start with the one at the bottom, and we add it layer by layer.

<svg width="200px" height="270px" viewBox="-100 -100 200 270">
  <polygon points="0,0 80,120 -80,120" fill="#234236" />
</svg>

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

<svg width="200px" height="270px" viewBox="-100 -100 200 270">
  <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="200px" height="270px" viewBox="-100 -100 200 270">
  <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>