<div class="canvas">
  <div class="watermelon">
    <div class="seed">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>
body {
  margin: 0;
  padding: 5%;
  background-color: #ffffff;
}

/* 描画エリア */
.canvas {
  width: min(100%,300px);
  margin: 0 auto;
}

/* スイカ */
.watermelon {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

/* スイカ(色) */
.watermelon::before {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(#f22435 0%, #f22435 55%, #ffffff 55%, #ffffff 61%, #8fef9e 61%, #8fef9e 67%,  #1c7239 67%);
  bottom: 0;
  left: 0;
}

/* スイカ(種) */
.seed {
  position: absolute;
  display: grid;
  row-gap: min(14px, 4vw);
  justify-content: space-between;
  width: calc(100% - 45%);
  top: calc(50% - 12.5%);
  left: 50%;
  transform: translate(-50%,-50%);
}

.seed span {
  position: relative;
  width: min(14px, 4vw);
  height: min(14px, 4vw);
  border-radius: 0 100% 50% 100%;
  background-color: #000;
  transform: rotate(45deg);
}

/* スイカ(種 / 1段目) */
.seed span:nth-child(1) {
  grid-column: 1;
}

.seed span:nth-child(2) {
  grid-column: 3;
}

.seed span:nth-child(3) {
  grid-column: 5;
}

/* スイカ(種 / 2段目) */
.seed span:nth-child(4) {
  grid-row: 2;
  grid-column: 2;
}

.seed span:nth-child(5) {
  grid-row: 2;
  grid-column: 4;
}

/* スイカ(種 / 3段目) */
.seed span:nth-child(6) {
  grid-row: 3;
  grid-column: 3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.