рисование необычных фигур с использованием s css или css

Question

Я хочу нарисовать пульсацию ниже, используя css.

Самым близким мне было что-то вроде этого.

display: block;
width: 126px;
height: 180px;
background-color: rgba(99, 83, 196, 0.38);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

Кто-нибудь имеет представление о том, как нарисовать половину ряби?

Answer 1

Я думаю, что это просто две концентрические c окружности, которые маскируются скругленным прямоугольником. Вы можете добиться этого с помощью кругового градиентного фона:

#out {
  background: #ddd;
  padding: 10px;
  width: 200px;
}

#in {
  background: #fff;
  background: radial-gradient(circle at 180px 10px, rgba(146,136,193,1) 30px, rgba(183,178,214,1) 30.5px, rgba(183,178,214,1) 50px, rgba(255,255,255,1) 50.5px);
  background-repeat: no-repeat;
  border-radius: 8px;
  color: #6456BD;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 700;
  height: 40px;
  padding: 30px 20px;
}

<div id="out">
  <div id="in">
    Usage<br>balances
  </div>
</div>