Undulating Moon

In this example below you will see how to do a Undulating Moon with some HTML / CSS and Javascript

based on https://dribbble.com/shots/1786065-Moon?list=buckets&offset=0

Thumbnail
This awesome code was written by winkerVSbecks, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright winkerVSbecks ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Undulating Moon</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

<svg id="moon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28">
  <path d="M20.51,18.49c1.23,0,2.42-0.26,3.57-0.79c0.42-0.19,0.8-0.12,1.12,0.2c0.149,0.149,0.24,0.319,0.27,0.529
			c0.04,0.21,0.021,0.41-0.069,0.601c-0.98,2.109-2.45,3.8-4.431,5.069C19,25.36,16.85,25.99,14.51,25.99
			c-1.62,0-3.18-0.311-4.65-0.95c-1.48-0.64-2.76-1.49-3.83-2.56C4.95,21.4,4.1,20.13,3.47,18.65c-0.64-1.48-0.96-3.03-0.96-4.66
			c0-1.59,0.3-3.12,0.9-4.57c0.6-1.45,1.41-2.71,2.44-3.77C6.87,4.59,8.1,3.73,9.53,3.08c1.42-0.65,2.93-1.01,4.53-1.07
			c0.459-0.02,0.77,0.18,0.95,0.61c0.19,0.42,0.11,0.8-0.229,1.12c-0.9,0.82-1.58,1.76-2.06,2.84c-0.47,1.08-0.71,2.21-0.71,3.41
			c0,1.54,0.38,2.97,1.14,4.27c0.76,1.3,1.791,2.33,3.1,3.09C17.55,18.11,18.97,18.49,20.51,18.49z"/>
</svg>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/winkerVSbecks/undulating-moon-vGbjH */
/* --------------------------------- 
  Mixins 
--------------------------------- */
#moon, .circle {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#moon {
  position: absolute;
  fill: #FCF8F4;
  fill-rule: evenodd;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
}

/* --------------------------------- 
  Circles 
--------------------------------- */
.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #F4C3D1;
  position: absolute;
  opacity: 0;
  left: 50%;
  top: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

.circle:nth-child(11n+0) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 0ms;
  animation-delay: 0ms;
}

.circle:nth-child(11n+1) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}

.circle:nth-child(11n+2) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 1000ms;
  animation-delay: 1000ms;
}

.circle:nth-child(11n+3) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 1500ms;
  animation-delay: 1500ms;
}

.circle:nth-child(11n+4) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 2000ms;
  animation-delay: 2000ms;
}

.circle:nth-child(11n+5) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 2500ms;
  animation-delay: 2500ms;
}

.circle:nth-child(11n+6) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 3000ms;
  animation-delay: 3000ms;
}

.circle:nth-child(11n+7) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 3500ms;
  animation-delay: 3500ms;
}

.circle:nth-child(11n+8) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 4000ms;
  animation-delay: 4000ms;
}

.circle:nth-child(11n+9) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 4500ms;
  animation-delay: 4500ms;
}

.circle:nth-child(11n+10) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 5000ms;
  animation-delay: 5000ms;
}

.circle:nth-child(11n+11) {
  -webkit-animation: undulate 5s infinite;
  -moz-animation: undulate 5s infinite;
  -o-animation: undulate 5s infinite;
  animation: undulate 5s infinite;
  -webkit-animation-delay: 5500ms;
  animation-delay: 5500ms;
}

/* --------------------------------- 
  Animation 
--------------------------------- */
@-webkit-keyframes undulate {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  14% {
    background-color: #F4C3D1;
  }
  21% {
    background-color: #E4A1BD;
  }
  28% {
    background-color: #D17FA8;
  }
  35% {
    background-color: #BA6090;
  }
  42% {
    background-color: #954B76;
  }
  49% {
    background-color: #743562;
  }
  56% {
    background-color: #5A2C56;
  }
  63% {
    background-color: #54214F;
  }
  70% {
    background-color: #461B46;
  }
  77% {
    background-color: #320F3B;
  }
  84% {
    background-color: #2C0A37;
  }
  91% {
    background-color: #250831;
  }
  100% {
    background-color: #150525;
    width: 250px;
    height: 250px;
    opacity: 0;
  }
}
@-moz-keyframes undulate {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  14% {
    background-color: #F4C3D1;
  }
  21% {
    background-color: #E4A1BD;
  }
  28% {
    background-color: #D17FA8;
  }
  35% {
    background-color: #BA6090;
  }
  42% {
    background-color: #954B76;
  }
  49% {
    background-color: #743562;
  }
  56% {
    background-color: #5A2C56;
  }
  63% {
    background-color: #54214F;
  }
  70% {
    background-color: #461B46;
  }
  77% {
    background-color: #320F3B;
  }
  84% {
    background-color: #2C0A37;
  }
  91% {
    background-color: #250831;
  }
  100% {
    background-color: #150525;
    width: 250px;
    height: 250px;
    opacity: 0;
  }
}
@-ms-keyframes undulate {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  14% {
    background-color: #F4C3D1;
  }
  21% {
    background-color: #E4A1BD;
  }
  28% {
    background-color: #D17FA8;
  }
  35% {
    background-color: #BA6090;
  }
  42% {
    background-color: #954B76;
  }
  49% {
    background-color: #743562;
  }
  56% {
    background-color: #5A2C56;
  }
  63% {
    background-color: #54214F;
  }
  70% {
    background-color: #461B46;
  }
  77% {
    background-color: #320F3B;
  }
  84% {
    background-color: #2C0A37;
  }
  91% {
    background-color: #250831;
  }
  100% {
    background-color: #150525;
    width: 250px;
    height: 250px;
    opacity: 0;
  }
}
@keyframes undulate {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  14% {
    background-color: #F4C3D1;
  }
  21% {
    background-color: #E4A1BD;
  }
  28% {
    background-color: #D17FA8;
  }
  35% {
    background-color: #BA6090;
  }
  42% {
    background-color: #954B76;
  }
  49% {
    background-color: #743562;
  }
  56% {
    background-color: #5A2C56;
  }
  63% {
    background-color: #54214F;
  }
  70% {
    background-color: #461B46;
  }
  77% {
    background-color: #320F3B;
  }
  84% {
    background-color: #2C0A37;
  }
  91% {
    background-color: #250831;
  }
  100% {
    background-color: #150525;
    width: 250px;
    height: 250px;
    opacity: 0;
  }
}
/* --------------------------------- 
  Global 
--------------------------------- */
html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #150525;
}


/*Downloaded from https://www.codeseek.co/winkerVSbecks/undulating-moon-vGbjH */
var circles = document.getElementsByClassName('circle');

var addListener = function(circle, i) {
 circle.addEventListener('animationend', 
  function() {
    console.log('done ');
    //circles[i].style.zIndex = '1';
  }, false);
}

for(i = 0; i < circles.length - 1; i++) {
 addListener(circles[i], i);
}

Comments