<!-- watermelon -->
<div class="watermelon">
  <div class="inside">
    <div class="seed"></div>
    <div class="seed"></div>
    <div class="seed"></div>
    <div class="seed"></div>
    <div class="seed"></div>
    <div class="seed"></div>
  </div>
  <div class="light"></div>
  <div class="shadow"></div>
</div>

*{margin:0;}

body{
  width:100%;height:100vh; display:flex; align-items:center; justify-content:center;
  background:#686de0;
}

.watermelon{
  box-shadow:
    inset 20px -25px 25px 5px rgba(0,0,0,.3);
}

.watermelon, .inside{
  width:50vw;
  height:25vw;
  border-radius: 0 0 25vw 25vw;
  border:1vw solid;
  background:#009432;
  position:relative;
}

.inside{
  background:#EA2027;
  border-top:0;
  position:absolute;
  top:-1px;
  left:50%;
  transform:translate(-50%,-7%) scale(.86);
}

.watermelon::before, .watermelon::after{
  content:'';
  background:#686de0;
  border:1vw solid;
  position:absolute;
  border-top:none;
  top:-1vw;
  z-index:2;
}

.watermelon::before{
  width:8vw; height:4vw;
  left:5vw;
  border-radius:0 0 8vw 8vw;
}

.watermelon::after{
  width:4vw; height:2vw;
  left:14vw;
  border-radius:0 0 4vw 4vw;
}





.inside::before, .inside::after{
  content:'';
  background:rgba(255,255,255,.7);
  position:absolute;
  z-index:1;
}

.inside::before{
  width:3vw;
  height:1vw;
  bottom:3vw;
  right:10vw;
  border-radius:1vw;
  transform:rotate(60deg);
}

.inside::after{
  background:rgba(255,255,255,.5);
  width:2vw;
  height:1vw;
  bottom:2vw;
  right:12vw;
  border-radius:1vw;
  transform:rotate(60deg);
}


.seed{
  position:absolute;
  background:black;
  width:1vw;height:2vw;
  border-radius:50% 50% 20% 20%;
}

.seed:nth-child(1){
    top:8vw; left:5vw;
    transform:rotate(35deg) scale(.9);
}

.seed:nth-child(2){
    top:20vw; left:20vw;
    transform:rotate(-5deg);
}

.seed:nth-child(3){
    top:10vw; left:15vw;
    transform:rotate(20deg) scale(.8);
}

.seed:nth-child(4){
    top:5vw; left:28vw;
    transform:rotate(-20deg) scale(.5);
}

.seed:nth-child(5){
    top:8vw; left:45vw;
    transform:rotate(-40deg) scale(.8);
}

.seed:nth-child(6){
    top:14vw; left:32vw;
    transform:rotate(-5deg) scale(.6);
}


/* if you want light effet */
.light{
  background:linear-gradient(to bottom, rgba(255,255,255,.20) 5%, transparent);
  z-index:3;
  position:absolute;
  left:-1vw;
  top:-1vw;
  right:-1vw;
  bottom:-1vw;
  border-radius:0 0 25vw 25vw;
}

.light::before, .light::after{
  content:'';
  background:#686de0;
  position:absolute;
  border-top:none;
  top:0;
  z-index:2;
  transform:scale(1.03);
}

.light::before{
  width:8vw; height:4vw;
  left:7vw;
  border-radius:0 0 8vw 8vw;
}

.light::after{
  width:4vw; height:2vw;
  left:16vw;
  border-radius:0 0 4vw 4vw;
}


/* shadow */
.shadow{
  position:absolute;
  bottom:-10vw;
  left:50%;
  border-radius: 50%;
  transform:translateX(-50%);
  width:45vw;
  height:5vw;
  background:radial-gradient(rgba(0,0,0,.2),transparent);
  filter:blur(10px);
}