You may be surprised at how easy it is to draw this gingerbread man based on a few lines. We also learn how to round the ends of lines and the vertices of rectangles.

Moving styling properties to CSS

We can assign CSS classes to each element and move some attributes to CSS. We can only move the presentation attributes though. Position attributes and attributes that define the shapes have to stay in the SVG-tags. But colors, stroke, and font attributes can be moved to CSS.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <style>
    .head {
      fill: #cd803d;
    }
  </style>
  <circle class="head" cx="0" cy="-50" r="30" />
</svg>

Rounded lines

We already saw the fill and some stroke properties, but here’s another styling property. The stroke-linecap. This can make our line cap rounded. Note that the legs and the arms are simple lines here.

To give you a comparison if we remove the line cap and set a smaller stroke-width, then this is how it would look like.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <style>
    .limb {
      stroke: #cd803d;
    }
  </style>
  <line class="limb" x1="-40" y1="-10" x2="40" y2="-10" />
  <line class="limb" x1="-25" y1="50" x2="0" y2="-15" />
  <line class="limb" x1="25" y1="50" x2="0" y2="-15" />
</svg>

But by setting a thick stroke width and a round line cap we can shape legs and arms for our figure.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <style>
    .limb {
      stroke: #cd803d;
      stroke-width: 35px;
      stroke-linecap: round;
    }
  </style>
  <line class="limb" x1="-40" y1="-10" x2="40" y2="-10" />
  <line class="limb" x1="-25" y1="50" x2="0" y2="-15" />
  <line class="limb" x1="25" y1="50" x2="0" y2="-15" />
</svg>

Rounded rectangles

Also, note the rx property at the rectangle defining the mouth. This will make the edges rounded. It is similar to the border-radius property for regular HTML elements.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <style>
    .head {
      fill: #cd803d;
    }
    .mouth {
      fill: none;
      stroke: white;
      stroke-width: 2px;
    }
  </style>
  <circle class="head" cx="0" cy="-50" r="30" />
  <rect class="mouth" x="-10" y="-40" width="20" height="5" rx="2" />
</svg>

Gingerbread man

Once we put it all together, and add eyes and buttons, this is how the final code looks like:

<svg class="gingerbread" width="200px" height="200px" viewBox="-100 -100 200 200">
  <style>
    .head {
      fill: #cd803d;
    }
    .eye {
      fill: white;
    }
    .mouth {
      fill: none;
      stroke: white;
      stroke-width: 2px;
    }
    .limb {
      stroke: #cd803d;
      stroke-width: 35px;
      stroke-linecap: round;
    }
  </style>
  <circle class="head" cx="0" cy="-50" r="30" />
  <circle class="eye" cx="-12" cy="-55" r="3" />
  <circle class="eye" cx="12" cy="-55" r="3" />
  <rect class="mouth" x="-10" y="-40" width="20" height="5" rx="2" />
  <line class="limb" x1="-40" y1="-10" x2="40" y2="-10" />
  <line class="limb" x1="-25" y1="50" x2="0" y2="-15" />
  <line class="limb" x1="25" y1="50" x2="0" y2="-15" />
  <circle class="button" cx="0" cy="-10" r="5" />
  <circle class="button" cx="0" cy="10" r="5" />
</svg>