CSS と SVG を使用して端が曲がった円を作成する方法

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,
                <svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15'  width='64' height='64' fill='%2329a7e8'>
                <path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' />
                </svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

<div>