HTML
<div class="wrapper">
<div class="container">
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
</div>
</div>
SCSS
body {
margin: auto;
width: 100vw;
height: 100vh;
background: #222;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.5s;
}
svg {
display: none;
}
.wrapper {
width: 100vmin;
height: 100vmin;
overflow: overflow;
}
body:active {
background: #fff;
}
@media screen and (max-width: 500px) {
.wrapper {
width: 100vmax;
height: 100vmax;
}
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
overflow: overflow;
animation: 4s hue-rot linear infinite;
}
.blob {
width: 10%;
height: 10%;
background: #000;
border-radius: 50%;
animation: 4s ease-in-out infinite blob-hop;
}
@keyframes hue-rot {
0%, 100% { filter: hue-rotate(360deg); }
50% { filter: hue-rotate(0deg); }
}
@keyframes blob-hop {
0%, 50%, 100% {
transform: scale(0.8);
}
25% {
filter: hue-rotate(0deg);
transform: translate(0vmin, 8vmin);
}
75% {
filter: hue-rotate(0deg);
transform: translate(1vmin,-12vmin);
}
}
@for $i from 1 through 100 {
.blob:nth-child(#{$i}) {
background: hsl($i*36, 255, 50%);
animation-delay: #{-$i*0.2*pow(1.001,$i)}s;
}
}
