How to Draw a Bear with SVG

Let’s draw a bear to practice drawing cubic and quadratic Bézier curves.

We start with the ears. These are two circles that both have the fill and the stroke attributes set. We also defined a class on the SVG element to set the background color. Note, that here we set the regular background-color CSS property and not the fill attribute. Fill works with shapes, but the SVG element itself is not a shape.

-100, -100

200, 200

<svg
  class="bear"
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <circle
    class="ear"
    cx="-40"
    cy="-50"
    r="18"
  />
  <circle
    class="ear"
    cx="40"
    cy="-50"
    r="18"
  />
</svg>

.bear {
  background-color: #f5eed7;
}

.bear .ear {
  fill: #e5c39c;
  stroke: white;
  stroke-width: 5;
}

Then let’s add the face and the eyes. Here’s another thing we haven’t covered before. Earlier we saw that we can round rectangles with the rx property. We can be even more specific and set a different radius on the Y-axis with the ry property. If the latter is not set, it falls back to the other one.

-100, -100

200, 200

<svg
  class="bear"
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <rect
    class="face"
    x="-55"
    y="-60"
    width="110"
    height="120"
    rx="50"
    ry="30"
  />
  <circle cx="20" cy="-30" r="3" />
  <circle cx="-20" cy="-30" r="3" />
</svg>

.bear {
  background-color: #f5eed7;
}

.bear .face {
  fill: white;
}

Then, let’s draw the muzzle. We use the path element for this.

We draw the upper part of it as a cubic Bézier curve and the two bottom corners with two quadratic Bézier curves. Hover over the coordinates in the code or on the image to see how they are positioned.

-100, -100

200, 200

<svg
  class="bear"
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M -30 0
      C -30 -25 30 -25 30 0
      L 30 30
      Q 30 40 20 40
      L -20 40
      Q -30 40 -30 30"
    fill="#E5C39C"
  />
</svg>

.bear {
  background-color: #f5eed7;
}

Finally, we can add the nose and the mouth as two more paths. The nose uses a cubic Bézier curve, and the mouth uses two quadratic Bézier curves.

-100, -100

200, 200

<svg
  class="bear"
  width="200"
  height="200"
  viewBox="-100 -100 200 200"
>
  <path
    d="
      M -10 0
      L 10 0
      C 10 20 -10 20 -10 0"
  />
  <path
    class="mouth"
    d="
      M 0 10
      Q 0 25 10 25

      M 0 10
      Q 0 25 -10 25"
  />
</svg>

.bear {
  background-color: #f5eed7;
}

.bear .mouth {
  fill: none;
  stroke: black;
  stroke-width: 2;
}

Once we put it all together we end up with the image on the left.

<svg class="bear" width="200" height="200" viewBox="-100 -100 200 200">
  <circle class="ear" cx="-40" cy="-50" r="18"></circle>
  <circle class="ear" cx="40" cy="-50" r="18"></circle>

  <rect class="face" x="-55" y="-60" width="110" height="120" rx="50" ry="30" />
  <circle cx="20" cy="-30" r="3" />
  <circle cx="-20" cy="-30" r="3" />

  <path
    d="
      M -30 0
      C -30 -25 30 -25 30 0
      L 30 30
      Q 30 40 20 40
      L -20 40
      Q -30 40 -30 30"
    fill="#E5C39C"
  />
  <path
    d="
      M -10 0
      L 10 0
      C 10 20 -10 20 -10 0"
  />
  <path
    class="mouth"
    d="
      M 0 10
      Q 0 25 10 25

      M 0 10
      Q 0 25 -10 25"
  />
</svg>

.bear {
  background-color: #f5eed7;
}

.bear .ear {
  fill: #e5c39c;
  stroke: white;
  stroke-width: 5;
}

.bear .face {
  fill: white;
}

.bear .mouth {
  fill: none;
  stroke: black;
  stroke-width: 2;
}