Создать логотип css3

Я хотел бы создать логотип Vodafone с помощью css, например:

Я знаю, что некоторые люди могут рисовать что угодно с помощью CSS. Я не могу понять, как сделать форму капли слезы. Это то, что я имею до сих пор:

#logoMain {
  width: 100px;
  height: 100px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 50%;
  box-shadow: 0px 0px 50px 0px #999 inset;
  position: relative;
}

#logoMainafter {
  width: 100px;
  height: 100px;
  margin-top: -35px;
  margin-left: 55px;
  display: block;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

#logoInside {
  width: 50px;
  height: 50px;
  margin: 24px;
  background-color: #fe0000;
  border: 1px solid red;
  border-radius: 50%;
  box-shadow: 0px 0px 15px 3px #a80000 inset;
}

<body>
  <div id="logoMain">
    <div id="logoInside"></div>
    <div id="logoMainafter"></div>
  </div>
</body>

Ответ 1

Хорошо, поскольку кто-то отвечает, здесь у вас есть черновик, начинающийся с

CSS

#logoMain {
    width: 100px;
    height: 100px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0px 0px 50px 0px #999 inset ;
    position: relative;
}

#logoMainafter {
  width: 100px;
  height: 100px;
  margin-top: -35px;
  margin-left: 55px;
  display: block;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

#logoInside {
    width: 50px;
    height: 50px;
    margin: 24px;
    background-color: #fe0000;
    border: 1px solid red;
    border-radius: 50%;
    box-shadow: 0px 0px 15px 3px #a80000 inset;
    z-index: 23;
    position: absolute;
}

#logoMain:after {
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    top: 2px;
    left: 57px;
    /* background-color: green; */
    border-radius: 50%;
    box-shadow: -19px 17px 0px 14px #e80000;
    clip: rect(0px, 12px, 63px, -110px);
    z-index: 0;
}

fiddle

Ответ 2

Для более сложных фигур я бы посмотрел на d3js или raphael и элемент svg с поддержкой css. Взгляните на этот пример. Существует много других примеров на одном и том же сайте сложных форм, которые вы можете рисовать с помощью CSS с небольшой помощью от JS.