<body>
 <div class="box">
   <div class="cone__base"></div>
   <div class="scoop__yellow"></div>
   <div class="faces scoop__yellow__face">
     <div class="eye-left"></div>
      <div class="eye-right"></div>
      <div class="mouth">
        <div class="tongue"></div>
      </div>
   </div>
   <div class="scoop__yellow--drip1"></div>
   <div class="scoop__yellow--drip2 "></div>
   <div class="scoop__yellow--drip3"></div>
   <div class="scoop__yellow--drip4"></div>
   <div class="scoop__green"></div>
    <div class="faces scoop__green__face">
     <div class="eye-left"></div>
      <div class="eye-right"></div>
      <div class="mouth">
        <div class="tongue"></div>
      </div>
   </div>
   <div class="scoop__green--drip1"></div>
   <div class="scoop__green--drip2"></div>
   <div class="scoop__green--drip3"></div>
   <div class="scoop__green--drip4"></div>
   <div class="scoop__peach"></div>
    <div class="faces scoop__peach__face">
     <div class="eye-left"></div>
      <div class="eye-right"></div>
      <div class="mouth">
        <div class="tongue"></div>
      </div>
   </div>
   <div class="scoop__peach--drip1"></div>
   <div class="scoop__peach--drip2"></div>
   <div class="scoop__peach--drip3"></div>
   <div class="scoop__peach--drip4"></div>
   <div class="scoop__peach--drip5"></div>
   <div class="scoop__peach--drip6"></div>
  </div> 
</body>
.box {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 600px;
  height: 600px;
  background: #9ddadb;
}

.cone__base {
  border-left: 85px solid transparent;
  border-top: 250px solid #EDD5AF;
  border-right: 85px solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  left: 35%;
  bottom: 5%;
}

/* YELLOW */

.scoop__yellow {
  width: 180px;
  height: 160px;
  background-color: #FCEEB5;
  border-radius: 50%;
  position: absolute;
  left: 33.5%;
  bottom: 65%;
  z-index: 3;
}

.scoop__yellow--drip1 {
  width: 60px;
  height: 45px;
  background-color: #FCEEB5;
  border-radius: 50%;
  position: absolute;
  left: 53%;
  bottom: 67%;
  z-index: 3;
}

.scoop__yellow--drip2 {
  width: 30px;
  height: 60px;
  background-color: #FCEEB5;
  border-radius: 50%;
  position: absolute;
  left: 54%;
  bottom: 63%;
  z-index: 3;
  animation: melt 15s infinite ease-in;
}

.scoop__yellow--drip3 {
  width: 70px;
  height: 45px;
  background-color: #FCEEB5;
  border-radius: 50%;
  position: absolute;
  left: 34%;
  bottom: 66%;
  z-index: 3;
}

.scoop__yellow--drip4 {
  width: 20px;
  height: 20px;
  background-color: #FCEEB5;
  border-radius: 50%;
  position: absolute;
  left: 51.5%;
  bottom: 64.5%;
  z-index: 3;
  animation: melt-small 15s infinite ease-in;
}

.scoop__yellow__face {
  width: 20%;
  height: 20%;
  border-radius: 50%;
  position: absolute;
  left: 36%;
  bottom: 70%;
  z-index: 4;
  
  .eye-left {
    width: 13%;
		height: 12%;
		background: #000;
		position: absolute;
		left: 25%;
		bottom: 54%;
		border-radius: 50%;
  }
  
  .eye-right {
    width: 13%;
		height: 12%;
		background: #000;
		position: absolute;
		left: 65%;
		bottom: 54%;
		border-radius: 50%;
  }
  
  .mouth {
    position: absolute;
    left: 35%;
    bottom: 22%;
    width: 30%;
    height: 16%;
    border-radius: 0 0 100px 100px;
    background: #424B54;
    overflow: hidden;
    z-index: 3;
    
    .tongue {
      position: absolute;
      left: 25%;
      bottom: -71%;
      width: 80%;
      height: 125%;
      background: #F6828C;
      border-radius: 100%;
      z-index: 5;
    }
  }
}

/* GREEN */

.scoop__green {
  width: 180px;
  height: 160px;
  background-color: #A2CCB6;
  border-radius: 50%;
  position: absolute;
  left: 32%;
  bottom: 50%;
  z-index: 2;
}

.scoop__green--drip1 {
  width: 60px;
  height: 45px;
  background-color: #A2CCB6;
  border-radius: 50%;
  position: absolute;
  left: 53%;
  bottom: 52%;
  z-index: 2;
}

.scoop__green--drip2 {
  width: 35px;
  height: 40px;
  background-color: #A2CCB6;
  border-radius: 50%;
  position: absolute;
  left: 53%;
  bottom: 50.5%;
  z-index: 2;
}

.scoop__green--drip3 {
  width: 60px;
  height: 45px;
  background-color: #A2CCB6;
  border-radius: 50%;
  position: absolute;
  left: 34%;
  bottom: 50%;
  z-index: 2;
}

.scoop__green--drip4 {
  width: 35px;
  height: 60px;
  background-color: #A2CCB6;
  border-radius: 50%;
  position: absolute;
  left: 40.5%;
  bottom: 48.5%;
  z-index: 2;
  animation: melt 15s infinite ease-in;
}

.scoop__green__face {
  width: 12%;
  height: 12%;
  border-radius: 50%;
  position: absolute;
  left: 33%;
  bottom: 52%;
  z-index: 4;
  
  .eye-left {
    width: 13%;
		height: 12%;
		background: #000;
		position: absolute;
		left: 25%;
		bottom: 54%;
		border-radius: 50%;
  }
  
  .eye-right {
    width: 13%;
		height: 12%;
		background: #000;
		position: absolute;
		left: 65%;
		bottom: 54%;
		border-radius: 50%;
  }
  
  .mouth {
    position: absolute;
    left: 35%;
    bottom: 22%;
    width: 30%;
    height: 16%;
    border-radius: 0 0 100px 100px;
    background: #424B54;
    overflow: hidden;
    z-index: 3;
  }
}

/* PEACH */

.scoop__peach {
  width: 180px;
  height: 160px;
  background-color: #EE786E;
  border-radius: 50%;
  position: absolute;
  left: 34%;
  bottom: 35%;
}

.scoop__peach--drip1 {
  width: 30px;
  height: 35px;
  background-color: #EE786E;
  border-radius: 50%;
  position: absolute;
  left: 37%;
  bottom: 35%;
}

.scoop__peach--drip2 {
  width: 30px;
  height: 35px;
  background-color: #EE786E;
  border-radius: 50%;
  position: absolute;
  left: 41%;
  bottom: 34%;
}

.scoop__peach--drip3 {
  width: 30px;
  height: 35px;
  background-color: #EE786E;
  border-radius: 50%;
  position: absolute;
  left: 45%;
  bottom: 33%;
  animation: melt-medium 15s infinite ease-in;
}

.scoop__peach--drip4 {
  width: 30px;
  height: 35px;
  background-color: #EE786E;
  border-radius: 50%;
  position: absolute;
  left: 49%;
  bottom: 33.5%;
}

.scoop__peach--drip5 {
  width: 30px;
  height: 35px;
  background-color: #EE786E;
  border-radius: 50%;
  position: absolute;
  left: 53%;
  bottom: 34%;
  animation: melt-small 15s infinite ease-in;
}

.scoop__peach--drip6 {
  width: 30px;
  height: 35px;
  background-color: #EE786E;
  border-radius: 50%;
  position: absolute;
  left: 57%;
  bottom: 36%;
}

.scoop__peach__face {
  width: 15%;
  height: 15%;
  border-radius: 50%;
  position: absolute;
  left: 43%;
  bottom: 35%;
  z-index: 4;
  
  .eye-left {
    width: 13%;
		height: 12%;
		background: #000;
		position: absolute;
		left: 25%;
		bottom: 54%;
		border-radius: 50%;
  }
  
  .eye-right {
    width: 13%;
		height: 12%;
		background: #000;
		position: absolute;
		left: 65%;
		bottom: 54%;
		border-radius: 50%;
  }
  
  .mouth {
    position: absolute;
    left: 35%;
    bottom: 22%;
    width: 30%;
    height: 16%;
    border-radius: 0 0 100px 100px;
    background: #424B54;
    overflow: hidden;
    z-index: 3;
    
    .tongue {
      position: absolute;
      right: 25%;
      bottom: -71%;
      width: 80%;
      height: 125%;
      background: #F6828C;
      border-radius: 100%;
      z-index: 5;
    }
  }
}

// ANIMATIONS

@keyframes melt {
    0% { transform: translateY(0) }
    50% { transform: translateY(15px) }
    100% { transform: translateY(0) }
}

@keyframes melt-medium {
    0% { transform: translateY(0) }
    50% { transform: translateY(10px) }
    100% { transform: translateY(0) }
}

@keyframes melt-small {
    0% { transform: translateY(0) }
    50% { transform: translateY(8px) }
    100% { transform: translateY(0) }
}

@keyframes eyes {
    0% { transform: translateX(0) }
    50% { transform: translateX(8px) }
    100% { transform: translateX(0) }
}

View Compiled
// html setup

var facesHTMLCollection = document.getElementsByClassName('faces');
var facesArray = Array.from(facesHTMLCollection);

// input setup
var input = {
  mouseX: {
    start: 0,
    end: window.innerWidth,
    current: 0,
  },
  mouseY: {
    start: 0,
    end: window.innerHeight,
    current: 0,
  }
};

input.mouseX.range = input.mouseX.end - input.mouseX.start;
input.mouseY.range = input.mouseY.end - input.mouseY.start;

// output setup 
var output = {
  x: {
    start: -8,
    end: 8,
    current: 0,
  },
  y: {
    start: -8,
    end: 8,
    current: 0,
  },
}

output.x.range = output.x.end - output.x.start;
output.y.range = output.y.end - output.y.start;

var handleMouseMove = function(event) {
  // mouse x input 
  input.mouseX.current = event.clientX;
  input.mouseX.fraction = (input.mouseX.current - input.mouseX.start) / input.mouseX.range;
  
  // mouse y input
  input.mouseY.current = event.clientY;
  input.mouseY.fraction = (input.mouseY.current - input.mouseY.start) / input.mouseY.range;
  
  // output x
  output.x.current = output.x.start + (input.mouseX.fraction * output.x.range);
  output.x.opposite = output.x.end - (input.mouseX.fraction * output.x.range);
  
  // output y
  output.y.current = output.y.start + (input.mouseY.fraction * output.y.range);
  output.y.opposite = output.y.end - (input.mouseY.fraction * output.y.range);
  
  // apply output to html
  facesArray.forEach(function(face, k) {
    
    if (k === 0) {
      face.style.transform = 'translate('+output.x.current+'px, '+output.y.current+'px)';
    } else {
      face.style.transform = 'translate('+output.x.opposite+'px, '+output.y.opposite+'px)';
    }
  });
}

window.addEventListener('mousemove', handleMouseMove);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.