CSS: Untitled UI logo

While looking for inspiration for a new project, I came across the Untitled UI logo and decided to write it in CSS.

<div class="logo" style="--width: 20rem"></div>

.logo {
  width: var(--width);
  height: calc(var(--width) / 2);
  background-color: hsl(258, 51%, 50%);
  border-radius: 100vmin 100vmin 0 0;
  position: relative;

  &::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100%;
    transform: rotate(180deg);
    background-color: hsl(258, 51%, 50%);
    border-radius: 100vmin 100vmin 0 0;
  }

  &::after {
    content: "";
    width: 150%;
    height: 150%;
    position: absolute;
    bottom: -150%;
    left: -25%;
    border-radius: 100vmin 100vmin 0 0;
    transform: rotate(180deg);
    background-color: hsla(228, 26%, 96%, 0.1);
    backdrop-filter: blur(calc(var(--width) / 10));
  }
}