Bubble Waves

HTML
<svg viewBox="0 0 1000 500"> <circle r="50" cx="50" cy="250"></circle> <circle r="50" cx="150" cy="250"></circle> <circle r="50" cx="250" cy="250"></circle> <circle r="50" cx="350" cy="250"></circle> <circle r="50" cx="450" cy="250"></circle> <circle r="50" cx="550" cy="250"></circle> <circle r="50" cx="650" cy="250"></circle> <circle r="50" cx="750" cy="250"></circle> <circle r="50" cx="850" cy="250"></circle> <circle r="50" cx="950" cy="250"></circle> </svg>
SCSS
$duration: 1.5s; svg { width: 100vw; height: 80vh; } body { background: #333; display: flex; align-items:center; justify-content: center; flex-direction: column; } circle { transform: translate(0, -100px); animation: ball $duration cubic-bezier(0.420, 0.000, 0.580, 1.000) infinite; transform-origin: 50% 50%; } @for $i from 1 through 10 { circle:nth-child(#{$i}) { fill: hsl($i*20 - 20, 70%, 70%); animation-delay: $i * ($duration / -10); transform-origin: -200px + 120px * $i 250px ; } } @keyframes ball { 0%, 100% { transform: translate(0, 100px) scale(1); } 50% { transform: translate(0%, -100px) scale(0.3); } }
JAVASCRIPT
Expand for more options Login