Как сделать многоугольник с 12 мягкими углами как на картинке в CSS ??

Question

[askkttt]

Как с помощью CSS сделать мягкие края многоугольника ???
<div class="circle"></div>

:root {
  --scale: 200px;
  --borderAngle: 34px;
}

body {
  background: black;
}

.circle {
  margin: auto;
  margin-top: 100px;
  background: crimson;
  width: var(--scale);
  height: var(--scale);
  position: relative;
  text-align: center;
  transform: rotate(0deg);
  border-radius: var(--borderAngle);
}

.circle:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--scale);
  width: var(--scale);
  background: crimson;
  border-radius: var(--borderAngle);
  transform: rotate(125deg);
}

.circle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--scale);
  width: var(--scale);
  background: crimson;
  border-radius: var(--borderAngle);
  transform: rotate(160deg);
}

Answer 1

[Алексей Струков]

Такое лучше на svg делать.
Сложные фигуры на css это баловство. Если заказчик хочет такую сложную штуку, то завтра он может попросить сделать ее еще сложнее (по закону Мерфи обычно так и бывает) и один хрен придется делать потом на svg. Так зачем тратить время на css-костыль и оттягивать неминуемое?)

Answer 2

[askkttt]

Спасибо!