<div class="wrapper">
  <div class="pill"></div>
  <svg t="1599664396207" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3022" width="200" height="200">
    <path d="M540.5696 556.81024a81.8176 81.8176 0 0 1-53.0432-19.47648l-225.4848-191.52896a81.92 81.92 0 1 1 106.0864-124.86656l172.4416 146.47296 172.4416-146.47296a81.92 81.92 0 0 1 106.0864 124.86656l-225.4848 191.52896a81.7152 81.7152 0 0 1-53.0432 19.47648z m53.06368 246.23104l225.44384-191.52896a81.92 81.92 0 1 0-106.0864-124.84608l-172.40064 146.47296-172.48256-146.47296a81.92 81.92 0 1 0-106.04544 124.86656l225.52576 191.52896a81.7152 81.7152 0 0 0 53.00224 19.47648c18.88256 0 37.76512-6.49216 53.0432-19.49696z" p-id="3023"></path>
  </svg>
</div>

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background-color: #f7f9fb;
  box-sizing: border-box;
  align-items: center;
}

.pill {
  display: flex;
  width: 25vw;
  height: 10vh;
  box-sizing: border-box;
  border-radius: 999vmax;
  background-image: radial-gradient(
    circle at 100% 0%,
    #ed74e7 0,
    #d765e0 25%,
    #be55d8 50%,
    #a446d0 75%,
    #8a3aca 100%
  );
  overflow: hidden;
  resize: both;
  position: relative;
}

.wrapper {
  display: inline-flex;
  position: relative;
}

.wrapper::after {
  content: "Drag me (^_^) !";
  position: absolute;
  top: calc(100% + 10px);
  left: calc(100% + 10px);
  font-weight: 900;
  white-space: nowrap;
  font-size: 1.5rem;
  animation: swing 1s ease-in-out infinite;
  transform-origin: left top;
}

.icon {
  position: absolute;
  width: 1em;
  height: 1em;
  font-size: 24px;
  right: -20px;
  bottom: -10px;
  transform: rotate(135deg);
  fill: #90f;
}
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}