多个圆圈充满线性渐变背景

Question

我需要实现这种背景模式：

我添加删除一些文字部分以澄清，忽略我可怜的Gimp技能

我一直在为每个圆圈使用一个div，但它不会感觉非常易于维护。我想知道是否有纯CSS解决方案，或者我是否应该去寻找SVG背景。

以下是我现在提出的问题：https://jsfiddle.net/ygvdckLf/15/

HTML

<div class="card">
  <div class="circles-container">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>

SCSS

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  background: #6ec8d0;
  width: 274px;
  height: 132px;
}

.circles-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circle {
  position: absolute;
  border-radius: 50%;

  &:nth-child(1) {
    width: 100px;
    height: 100px;
    top: -50%;
    left: 2%;
    background-image: linear-gradient(to top, rgba(255,255,255,.3), transparent);
  }

  &:nth-child(2) {
    width: 200px;
    height: 200px;
    left: 20%;
    background-image: linear-gradient(50deg, rgba(255,255,255,.5), transparent 70%);
  }

  &:nth-child(3) {
    width: 90px;
    height: 90px;
    left: 60%;
    background-image: linear-gradient(20deg, rgba(255,255,255,.3), transparent 80%);
    }
    &:nth-child(4) {
      width: 100px;
      height: 100px;
      top: -50%;
      left: 60%;
      background-image: linear-gradient(to top, rgba(255,255,255,.3), transparent);
    }
}

有人知道吗？ 提前致谢