CSS Flexbox Blob Cluster

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; } }
JAVASCRIPT
Expand for more options Login