Создание чувствительной формы облака

Я пытаюсь создать чувствительную форму облака в CSS для проекта. Я стараюсь не делать этого с помощью изображений, CSS или встроенного SVG из-за HTTP-запросов и требований к отзывчивости.

Форма, о которой идет речь, будет такой: (но может быть похожей - небольшие изменения/улучшения были бы классными):

Я нашел оба этих вопроса, но они, похоже, не соответствуют моим конкретным потребностям:

Я попытался (и не смог) создать облако с border или box-shadow и должен знать, возможно ли это с помощью CSS или как альтернативного встроенного SVG. Я также видел, что Canvas - тоже вариант, но я предпочел бы держаться подальше от него, поскольку это может быть довольно сложно.

Это моя неудачная попытка

body {
  background: skyblue;
}

.cloud {
  width: 15%;
  height: 10vh;
  background: white;
  position: relative;
  margin: 100px 100px;
  border-radius: 65px;
  box-shadow: black 0 0 10px 10px;
}
.cloud:after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  top: -60px;
  left: 100px;
  border-radius: 75px;
  background: white;
}
.cloud:before {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  background: white;
  left: 50px;
  top: -30px;
  border-radius: 35px;
}

<div class="cloud"></div>

Ответ 1

Форма облака может быть создана с использованием SVG с одним элементом path в SVG. SVG по своей природе масштабируются без каких-либо искажений формы. Поддержка браузера для SVG очень хороша, и откат для IE8 и ниже (при необходимости) может быть предоставлен с использованием VML.

Создание формы

Команды, используемые при рисовании фигуры и их значении, следующие:

M 25,60 - Эта команда перемещает перо в точку, которая на 25 пикселей выше начала координат (0,0) по оси X и на 60 пикселей впереди начала координат по оси Y. ( Примечание: Команда написана в верхнем регистре, что указывает на движение absolute, а не движение relative).
a 20,20 1 0,0 0,40 - Эта команда создает дугу, радиусы X и Y которой 20 пикселей. Начальная точка дуги равна (25,60), а конечная точка (25,100) (то есть 0px прочь по оси X и 40 пикселей по оси Y).
h 50 - Эта команда рисует горизонтальную линию, которая на 50 пикселей впереди относительно начальной точки. Поскольку он относительный, конечная точка будет равна (75 100).
a 20,20 1 0,0 0,-40 - Подобно второй команде, это создает другую дугу, радиусы которой равны 20px на любой оси, а ее конечная точка - 40px раньше по отношению к предыдущей точке. Поэтому по существу это создало бы дугу от (75 100) до (75,60). Эта и вторая команда вместе образуют дуги с двух сторон облака.
a 10,10 1 0,0 -15,-10 - Еще одна команда дуги для создания одной части изогнутой вершины облака. Радиусы 10px, а дуга будет от (75,60) до (60,50).
a 15,15 1 0,0 -35,10 - Последняя дуга для завершения облака. Радиусы 15px, а дуга будет от (60,50) до (25,60). (25,60) была исходной отправной точкой и, таким образом, завершает форму.
z - Закрывает путь.

svg {
  height: 50%;
  width: 50%;
}
path {
  fill: white;
  stroke: black;
  stroke-width: 2;
  stroke-linejoin: round;
}
path:hover {
  fill: aliceblue;
  stroke: lightskyblue;
}

<svg viewBox='0 0 105 105'>
  <path d='M 25,60 
           a 20,20 1 0,0 0,40 
           h 50 
           a 20,20 1 0,0 0,-40 
           a 10,10 1 0,0 -15,-10 
           a 15,15 1 0,0 -35,10  
           z' />
</svg>

Ответ 2

Пухлые облака и радуги.

Отказ от ответственности: здесь нет радуг

Однако ниже представлено базовое "облако", сделанное с помощью одного элемента, и, поскольку оно использует единицы vw, оно также довольно быстро реагирует.

Он использует два псевдоэлемента, сформированных в виде кругов, для создания "облаков" облаков сверху. Это также позволяет использовать границу, так как вы можете поворачивать круги и применять цвет границы к двум сторонам.

.cloud {
  height: 30vw;
  width: 90vw;
  background: lightgray;
  border-radius: 40vw;
  border: 5px solid black;
  position: relative;
  margin-top: 20vw;
}
.cloud:before {
  content: "";
  position: absolute;
  top: -10vw;
  box-sizing: border-box;
  height: 20vw;
  width: 20vw;
  left: 15vw;
  border-radius: 50%;
  border: 5px solid black;
  border-bottom-color: transparent;
  border-right-color: transparent;
  background: lightgray;
  transform: rotate(40deg);
}
.cloud:after {
  content: "";
  position: absolute;
  height: 40vw;
  width: 40vw;
  top: -20vw;
  left: 32vw;
  border-radius: 50%;
  box-sizing: border-box;
  border: 5px solid black;
  border-bottom-color: transparent;
  background: lightgray;
  border-right-color: transparent;
  transform: rotate(55deg);
}

<div class="cloud"></div>