Drop links or images here to add them to the editor.

Let’s have another example with cubic and quadratic beziers.

Here the bottom of this bell is defined with straight lines.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <path fill="#FDEA96" stroke="black" stroke-width="2" d="
      M-50,40
      L-50,50
      L50,50
      L50,40"
  />
</svg>

Then a quadratic Béziers starts the bell cloak.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <path fill="#FDEA96" stroke="black" stroke-width="2" d="
      M-50,40
      L-50,50
      L50,50
      L50,40
      Q40,40,40,10"
  />
</svg>

Then the line is continued with a cubic Bézier to form the top of the bell.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <path fill="#FDEA96" stroke="black" stroke-width="2" d="
      M-50,40
      L-50,50
      L50,50
      L50,40
      Q40,40,40,10
      C40,-60,-40,-60,-40,10"
  />
</svg>

Then we reach the bottom part with another quadratic bezier that mirrors the previous one.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <path fill="#FDEA96" stroke="black" stroke-width="2" d="
      M-50,40
      L-50,50
      L50,50
      L50,40
      Q40,40,40,10
      C40,-60,-40,-60,-40,10
      Q-40,40,-50,40"
  />
</svg>

We finish the bell, by adding two circles for the bell-clapper, and the hanger.

<svg width="200px" height="200px" viewBox="-100 -100 200 200">
  <g stroke="black" stroke-width="2">
    <circle cx="0" cy="-45" r="7" fill="#4F6D7A" />
    <circle cx="0" cy="50" r="10" fill="#F79257" />
    <path fill="#FDEA96" d="
        M-50,40
        L-50,50
        L50,50
        L50,40
        Q40,40,40,10
        C40,-60,-40,-60,-40,10
        Q-40,40,-50,40"
    />
  </g>
</svg>