7+ CSS Animated Background Examples

This post contains a total of 7+ CSS Animated Background Examples with Source Code. All these Animated Backgrounds are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Animated Background Examples

1. By alphardex

Made by alphardex. Shooting Star Background Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/[email protected]/dist/aqua.min.css'>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
  overflow: hidden;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  transform: rotate(-45deg);
}

.star {
  --star-color: var(--primary-color);
  --star-tail-length: 6em;
  --star-tail-height: 2px;
  --star-width: calc(var(--star-tail-length) / 6);
  --fall-duration: 9s;
  --tail-fade-duration: var(--fall-duration);
  position: absolute;
  top: var(--top-offset);
  left: 0;
  width: var(--star-tail-length);
  height: var(--star-tail-height);
  color: var(--star-color);
  background: linear-gradient(45deg, currentColor, transparent);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px currentColor);
  transform: translate3d(104em, 0, 0);
  animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}
@media screen and (max-width: 750px) {
  .star {
    animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
  }
}
.star:nth-child(1) {
  --star-tail-length: 5.61em;
  --top-offset: 97.12vh;
  --fall-duration: 10.809s;
  --fall-delay: 0.674s;
}
.star:nth-child(2) {
  --star-tail-length: 5.19em;
  --top-offset: 73.48vh;
  --fall-duration: 6.915s;
  --fall-delay: 3.544s;
}
.star:nth-child(3) {
  --star-tail-length: 7.16em;
  --top-offset: 39.36vh;
  --fall-duration: 6.945s;
  --fall-delay: 3.093s;
}
.star:nth-child(4) {
  --star-tail-length: 5.9em;
  --top-offset: 20.79vh;
  --fall-duration: 8.525s;
  --fall-delay: 8.9s;
}
.star:nth-child(5) {
  --star-tail-length: 6.32em;
  --top-offset: 8.45vh;
  --fall-duration: 10.811s;
  --fall-delay: 0.072s;
}
.star:nth-child(6) {
  --star-tail-length: 6.46em;
  --top-offset: 13.11vh;
  --fall-duration: 9.979s;
  --fall-delay: 5.236s;
}
.star:nth-child(7) {
  --star-tail-length: 6.63em;
  --top-offset: 12.87vh;
  --fall-duration: 11.048s;
  --fall-delay: 7.097s;
}
.star:nth-child(8) {
  --star-tail-length: 7.01em;
  --top-offset: 88.73vh;
  --fall-duration: 10.036s;
  --fall-delay: 5.649s;
}
.star:nth-child(9) {
  --star-tail-length: 6.37em;
  --top-offset: 20.47vh;
  --fall-duration: 8.027s;
  --fall-delay: 7.212s;
}
.star:nth-child(10) {
  --star-tail-length: 5.4em;
  --top-offset: 65.01vh;
  --fall-duration: 6.633s;
  --fall-delay: 8.641s;
}
.star:nth-child(11) {
  --star-tail-length: 6.05em;
  --top-offset: 31.73vh;
  --fall-duration: 8.64s;
  --fall-delay: 4.422s;
}
.star:nth-child(12) {
  --star-tail-length: 6.47em;
  --top-offset: 7vh;
  --fall-duration: 8.742s;
  --fall-delay: 4.193s;
}
.star:nth-child(13) {
  --star-tail-length: 6.39em;
  --top-offset: 10.45vh;
  --fall-duration: 9.622s;
  --fall-delay: 0.7s;
}
.star:nth-child(14) {
  --star-tail-length: 7.25em;
  --top-offset: 70.63vh;
  --fall-duration: 11.669s;
  --fall-delay: 8.384s;
}
.star:nth-child(15) {
  --star-tail-length: 6.09em;
  --top-offset: 51.64vh;
  --fall-duration: 9.797s;
  --fall-delay: 1.667s;
}
.star:nth-child(16) {
  --star-tail-length: 5.65em;
  --top-offset: 69.06vh;
  --fall-duration: 8.67s;
  --fall-delay: 9.457s;
}
.star:nth-child(17) {
  --star-tail-length: 5.58em;
  --top-offset: 80.14vh;
  --fall-duration: 10.624s;
  --fall-delay: 9.705s;
}
.star:nth-child(18) {
  --star-tail-length: 5.44em;
  --top-offset: 29.59vh;
  --fall-duration: 7.865s;
  --fall-delay: 8.478s;
}
.star:nth-child(19) {
  --star-tail-length: 5.27em;
  --top-offset: 24.65vh;
  --fall-duration: 9.657s;
  --fall-delay: 4.024s;
}
.star:nth-child(20) {
  --star-tail-length: 6.82em;
  --top-offset: 80.69vh;
  --fall-duration: 10.552s;
  --fall-delay: 2.301s;
}
.star:nth-child(21) {
  --star-tail-length: 6.08em;
  --top-offset: 22.43vh;
  --fall-duration: 10.859s;
  --fall-delay: 7.482s;
}
.star:nth-child(22) {
  --star-tail-length: 5.09em;
  --top-offset: 32.25vh;
  --fall-duration: 9.543s;
  --fall-delay: 2.745s;
}
.star:nth-child(23) {
  --star-tail-length: 5.64em;
  --top-offset: 74.32vh;
  --fall-duration: 8.265s;
  --fall-delay: 8.364s;
}
.star:nth-child(24) {
  --star-tail-length: 7.28em;
  --top-offset: 32.51vh;
  --fall-duration: 9.478s;
  --fall-delay: 4.517s;
}
.star:nth-child(25) {
  --star-tail-length: 7.22em;
  --top-offset: 90.66vh;
  --fall-duration: 10.889s;
  --fall-delay: 3.371s;
}
.star:nth-child(26) {
  --star-tail-length: 6.94em;
  --top-offset: 87.34vh;
  --fall-duration: 7.623s;
  --fall-delay: 1.31s;
}
.star:nth-child(27) {
  --star-tail-length: 5.24em;
  --top-offset: 22.9vh;
  --fall-duration: 11.406s;
  --fall-delay: 1.939s;
}
.star:nth-child(28) {
  --star-tail-length: 5.92em;
  --top-offset: 90.69vh;
  --fall-duration: 11.876s;
  --fall-delay: 7.179s;
}
.star:nth-child(29) {
  --star-tail-length: 6.22em;
  --top-offset: 59.59vh;
  --fall-duration: 8.251s;
  --fall-delay: 9.415s;
}
.star:nth-child(30) {
  --star-tail-length: 5.36em;
  --top-offset: 30.37vh;
  --fall-duration: 6.351s;
  --fall-delay: 6.693s;
}
.star:nth-child(31) {
  --star-tail-length: 5.91em;
  --top-offset: 60.38vh;
  --fall-duration: 7.543s;
  --fall-delay: 8.371s;
}
.star:nth-child(32) {
  --star-tail-length: 6.2em;
  --top-offset: 12.63vh;
  --fall-duration: 6.793s;
  --fall-delay: 6.781s;
}
.star:nth-child(33) {
  --star-tail-length: 5.63em;
  --top-offset: 41.85vh;
  --fall-duration: 8.437s;
  --fall-delay: 8.482s;
}
.star:nth-child(34) {
  --star-tail-length: 7.07em;
  --top-offset: 73.49vh;
  --fall-duration: 8.452s;
  --fall-delay: 9.028s;
}
.star:nth-child(35) {
  --star-tail-length: 5.3em;
  --top-offset: 61.74vh;
  --fall-duration: 7.299s;
  --fall-delay: 0.538s;
}
.star:nth-child(36) {
  --star-tail-length: 7.18em;
  --top-offset: 34.52vh;
  --fall-duration: 7.399s;
  --fall-delay: 4.763s;
}
.star:nth-child(37) {
  --star-tail-length: 6.33em;
  --top-offset: 11.19vh;
  --fall-duration: 7.94s;
  --fall-delay: 5.856s;
}
.star:nth-child(38) {
  --star-tail-length: 7.16em;
  --top-offset: 95.68vh;
  --fall-duration: 10.927s;
  --fall-delay: 4.172s;
}
.star:nth-child(39) {
  --star-tail-length: 5.61em;
  --top-offset: 7.59vh;
  --fall-duration: 9.195s;
  --fall-delay: 5.236s;
}
.star:nth-child(40) {
  --star-tail-length: 5.83em;
  --top-offset: 99.28vh;
  --fall-duration: 11.816s;
  --fall-delay: 4.675s;
}
.star:nth-child(41) {
  --star-tail-length: 7.45em;
  --top-offset: 2.71vh;
  --fall-duration: 7.915s;
  --fall-delay: 5.522s;
}
.star:nth-child(42) {
  --star-tail-length: 5.33em;
  --top-offset: 60.76vh;
  --fall-duration: 11.187s;
  --fall-delay: 5.523s;
}
.star:nth-child(43) {
  --star-tail-length: 6.12em;
  --top-offset: 59.47vh;
  --fall-duration: 11.253s;
  --fall-delay: 6.208s;
}
.star:nth-child(44) {
  --star-tail-length: 7.34em;
  --top-offset: 16.64vh;
  --fall-duration: 9.214s;
  --fall-delay: 3.657s;
}
.star:nth-child(45) {
  --star-tail-length: 7.2em;
  --top-offset: 42.16vh;
  --fall-duration: 6.656s;
  --fall-delay: 6.725s;
}
.star:nth-child(46) {
  --star-tail-length: 5.11em;
  --top-offset: 46.16vh;
  --fall-duration: 8.623s;
  --fall-delay: 8.652s;
}
.star:nth-child(47) {
  --star-tail-length: 6.11em;
  --top-offset: 63.04vh;
  --fall-duration: 7.43s;
  --fall-delay: 8.148s;
}
.star:nth-child(48) {
  --star-tail-length: 6.85em;
  --top-offset: 89.6vh;
  --fall-duration: 10.405s;
  --fall-delay: 5.556s;
}
.star:nth-child(49) {
  --star-tail-length: 6.51em;
  --top-offset: 70.03vh;
  --fall-duration: 7.29s;
  --fall-delay: 0.333s;
}
.star:nth-child(50) {
  --star-tail-length: 7.05em;
  --top-offset: 78.13vh;
  --fall-duration: 6.237s;
  --fall-delay: 4.874s;
}
.star::before, .star::after {
  position: absolute;
  content: "";
  top: 0;
  left: calc(var(--star-width) / -2);
  width: var(--star-width);
  height: 100%;
  background: linear-gradient(45deg, transparent, currentColor, transparent);
  border-radius: inherit;
  animation: blink 2s linear infinite;
}
.star::before {
  transform: rotate(45deg);
}
.star::after {
  transform: rotate(-45deg);
}

@keyframes fall {
  to {
    transform: translate3d(-30em, 0, 0);
  }
}
@keyframes tail-fade {
  0%, 50% {
    width: var(--star-tail-length);
    opacity: 1;
  }
  70%, 80% {
    width: 0;
    opacity: 0.4;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}
@keyframes blink {
  50% {
    opacity: 0.6;
  }
}
</style>
</head>
<body>
  <div class="stars">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div> 
</body>
</html>

2. By Casthra Demosthene

Made by Casthra Demosthene. October Falling Leaves CSS Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Courgette|Open+Sans&display=swap" rel="stylesheet"> 
<style>
body {
margin:0;
padding:0;
overflow:hidden;
background-color:black;
}
section{
height:100%;
width:100%;
  position:absolute ;  background:radial-gradient(#333,#000);
}
.leaf{
    position:absolute ;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.leaf div{
position:absolute ;
display:block ;
}
.leaf div:nth-child(1){
    left:20%; 
    animation:fall 15s linear infinite ;
    animation-delay:-2s;

}
.leaf div:nth-child(2){
    left:70%; 
    animation:fall 15s linear infinite ;
    animation-delay:-4s;
}
.leaf div:nth-child(3){
    left:10%; 
    animation:fall 20s linear infinite ;
    animation-delay:-7s;
    
}
.leaf div:nth-child(4){
    left:50%; 
   animation:fall 18s linear infinite ; 
   animation-delay:-5s;
}
.leaf div:nth-child(5){
    left:85%; 
    animation:fall 14s linear infinite ;
    animation-delay:-5s;
}
.leaf div:nth-child(6){
    left:15%; 
    animation:fall 16s linear infinite ;
    animation-delay:-10s;
}
.leaf div:nth-child(7){
    left:90%; 
    animation:fall 15s linear infinite ;
    animation-delay:-4s;
}

@keyframes fall{
    0%{
        opacity:1;
        top:-10%;
        transform:translateX (20px) rotate(0deg);
    }
    20%{
        opacity:0.8;
        transform:translateX (-20px) rotate(45deg);
    }
    40%{

        transform:translateX (-20px) rotate(90deg);
    }
    60%{
        
       transform:translateX (-20px) rotate(135deg); 
    }
    80%{
    
        transform:translateX (-20px) rotate(180deg);
    }
    100%{
        
        top:110%;
        transform:translateX (-20px) rotate(225deg);
    }
    }
.leaf1{
    transform: rotateX(180deg);
}
h2{
    position:absolute ;
    top:40%;
    width:100%;
	  font-family: 'Courgette', cursive;
    font-size:4em;
    text-align:center;
    transform:translate ;
    color:#fff;
    transform:translateY (-50%);
}
</style>
    </head>
    <body>
    <section>
    <h2>
       Hello October!
      </h2>
  </div>
     <div class="leaf">
     <div>  <img src="http://www.pngmart.com/files/1/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
      <div><img src="http://www.pngmart.com/files/1/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
      <div>  <img src="http://www.pngmart.com/files/1/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
      <div><img  src="http://www.pngmart.com/files/1/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
       <div> <img src="http://www.pngmart.com/files/1/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
     <div>   <img src="http://www.pngmart.com/files/1/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
     <div><img src="http://cdn.clipart-db.ru/rastr/autumn_leaves_025.png" height="75px" width="75px"></div>
            
     </div>
     
     <div class="leaf leaf1">
     <div>  <img src="http://www.pngmart.com/files/1/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
      <div><img src="http://www.pngmart.com/files/1/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
      <div>  <img src="http://www.pngmart.com/files/1/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
      <div><img  src="http://www.pngmart.com/files/1/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
       <div> <img src="http://www.pngmart.com/files/1/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
     <div>   <img src="http://www.pngmart.com/files/1/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
     <div><img src="http://cdn.clipart-db.ru/rastr/autumn_leaves_025.png" height="75px" width="75px"></div>
            
     </div>
     
     <div class="leaf leaf2">
     <div>  <img src="http://www.pngmart.com/files/1/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
      <div><img src="http://www.pngmart.com/files/1/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
      <div>  <img src="http://www.pngmart.com/files/1/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
      <div><img  src="http://www.pngmart.com/files/1/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>

       <div> <img src="http://www.pngmart.com/files/1/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
     <div>   <img src="http://www.pngmart.com/files/1/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
     <div><img src="http://cdn.clipart-db.ru/rastr/autumn_leaves_025.png" height="75px" width="75px"></div>
            
     </div>
     </section>
    </body>
</html>

3. By Rob DiMarzo

Made by Rob DiMarzo. Infinite SVG Triangle Fusion. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  margin: 0;
  background-color: #6223D2;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.overlay {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 2;
  background: radial-gradient(circle, transparent 0%, rgba(98, 35, 210, 0.85) 100%);
}

.container {
  display: grid;
  grid-template-columns: repeat(10, 200px);
  grid-template-rows: repeat(6, 230px);
  transform: translate(-3%, -4%);
}

.shape {
  width: 200px;
  height: 230px;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.shape:nth-child(11) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(12) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(13) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(14) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(15) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(16) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(17) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(18) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(19) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(20) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(21) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(21) {
  transform: translate(0%, -50%);
}
.shape:nth-child(22) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(22) {
  transform: translate(0%, -50%);
}
.shape:nth-child(23) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(23) {
  transform: translate(0%, -50%);
}
.shape:nth-child(24) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(24) {
  transform: translate(0%, -50%);
}
.shape:nth-child(25) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(25) {
  transform: translate(0%, -50%);
}
.shape:nth-child(26) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(26) {
  transform: translate(0%, -50%);
}
.shape:nth-child(27) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(27) {
  transform: translate(0%, -50%);
}
.shape:nth-child(28) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(28) {
  transform: translate(0%, -50%);
}
.shape:nth-child(29) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(29) {
  transform: translate(0%, -50%);
}
.shape:nth-child(30) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(30) {
  transform: translate(0%, -50%);
}
.shape:nth-child(31) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(31) {
  transform: translate(0%, -50%);
}
.shape:nth-child(31) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(32) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(32) {
  transform: translate(0%, -50%);
}
.shape:nth-child(32) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(33) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(33) {
  transform: translate(0%, -50%);
}
.shape:nth-child(33) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(34) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(34) {
  transform: translate(0%, -50%);
}
.shape:nth-child(34) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(35) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(35) {
  transform: translate(0%, -50%);
}
.shape:nth-child(35) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(36) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(36) {
  transform: translate(0%, -50%);
}
.shape:nth-child(36) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(37) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(37) {
  transform: translate(0%, -50%);
}
.shape:nth-child(37) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(38) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(38) {
  transform: translate(0%, -50%);
}
.shape:nth-child(38) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(39) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(39) {
  transform: translate(0%, -50%);
}
.shape:nth-child(39) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(40) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(40) {
  transform: translate(0%, -50%);
}
.shape:nth-child(40) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(41) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(41) {
  transform: translate(0%, -50%);
}
.shape:nth-child(41) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(41) {
  transform: translate(0%, -100%);
}
.shape:nth-child(42) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(42) {
  transform: translate(0%, -50%);
}
.shape:nth-child(42) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(42) {
  transform: translate(0%, -100%);
}
.shape:nth-child(43) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(43) {
  transform: translate(0%, -50%);
}
.shape:nth-child(43) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(43) {
  transform: translate(0%, -100%);
}
.shape:nth-child(44) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(44) {
  transform: translate(0%, -50%);
}
.shape:nth-child(44) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(44) {
  transform: translate(0%, -100%);
}
.shape:nth-child(45) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(45) {
  transform: translate(0%, -50%);
}
.shape:nth-child(45) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(45) {
  transform: translate(0%, -100%);
}
.shape:nth-child(46) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(46) {
  transform: translate(0%, -50%);
}
.shape:nth-child(46) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(46) {
  transform: translate(0%, -100%);
}
.shape:nth-child(47) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(47) {
  transform: translate(0%, -50%);
}
.shape:nth-child(47) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(47) {
  transform: translate(0%, -100%);
}
.shape:nth-child(48) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(48) {
  transform: translate(0%, -50%);
}
.shape:nth-child(48) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(48) {
  transform: translate(0%, -100%);
}
.shape:nth-child(49) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(49) {
  transform: translate(0%, -50%);
}
.shape:nth-child(49) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(49) {
  transform: translate(0%, -100%);
}
.shape:nth-child(50) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(50) {
  transform: translate(0%, -50%);
}
.shape:nth-child(50) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(50) {
  transform: translate(0%, -100%);
}
.shape:nth-child(51) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(51) {
  transform: translate(0%, -50%);
}
.shape:nth-child(51) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(51) {
  transform: translate(0%, -100%);
}
.shape:nth-child(51) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(52) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(52) {
  transform: translate(0%, -50%);
}
.shape:nth-child(52) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(52) {
  transform: translate(0%, -100%);
}
.shape:nth-child(52) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(53) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(53) {
  transform: translate(0%, -50%);
}
.shape:nth-child(53) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(53) {
  transform: translate(0%, -100%);
}
.shape:nth-child(53) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(54) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(54) {
  transform: translate(0%, -50%);
}
.shape:nth-child(54) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(54) {
  transform: translate(0%, -100%);
}
.shape:nth-child(54) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(55) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(55) {
  transform: translate(0%, -50%);
}
.shape:nth-child(55) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(55) {
  transform: translate(0%, -100%);
}
.shape:nth-child(55) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(56) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(56) {
  transform: translate(0%, -50%);
}
.shape:nth-child(56) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(56) {
  transform: translate(0%, -100%);
}
.shape:nth-child(56) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(57) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(57) {
  transform: translate(0%, -50%);
}
.shape:nth-child(57) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(57) {
  transform: translate(0%, -100%);
}
.shape:nth-child(57) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(58) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(58) {
  transform: translate(0%, -50%);
}
.shape:nth-child(58) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(58) {
  transform: translate(0%, -100%);
}
.shape:nth-child(58) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(59) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(59) {
  transform: translate(0%, -50%);
}
.shape:nth-child(59) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(59) {
  transform: translate(0%, -100%);
}
.shape:nth-child(59) {
  transform: translate(-50%, -125%);
}
.shape:nth-child(60) {
  transform: translate(-50%, -25%);
}
.shape:nth-child(60) {
  transform: translate(0%, -50%);
}
.shape:nth-child(60) {
  transform: translate(-50%, -75%);
}
.shape:nth-child(60) {
  transform: translate(0%, -100%);
}
.shape:nth-child(60) {
  transform: translate(-50%, -125%);
}
</style>
</head>
<body>
  <div class="overlay"></div>
<div class="container">
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
  <svg class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice">
    <polygon points="" fill="none" stroke="hsl(320,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="0s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(240,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="1s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(160,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="2s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
    <polygon points="" fill="none" stroke="hsl(80,100%,70%)" stroke-width="5">
      <animate attributeName="points" repeatCount="indefinite" dur="4s" begin="3s" from="50 57.5, 50 57.5, 50 57.5" to="50 -75, 175 126, -75 126"></animate>
    </polygon>
  </svg>
</div>
</body>
</html>

4. By alphardex

Made by alphardex. Bubble Float Background Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  background: #1a1e23;
  margin: 0;
}

.bubbles {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bubble {
  position: absolute;
  left: var(--bubble-left-offset);
  bottom: -75%;
  display: block;
  width: var(--bubble-radius);
  height: var(--bubble-radius);
  border-radius: 50%;
  animation: float-up var(--bubble-float-duration) var(--bubble-float-delay) ease-in infinite;
}
.bubble::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(136, 246, 251, 0.3);
  border-radius: inherit;
  animation: var(--bubble-sway-type) var(--bubble-sway-duration) var(--bubble-sway-delay) ease-in-out alternate infinite;
}
.bubble:nth-child(0) {
  --bubble-left-offset: 44vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(1) {
  --bubble-left-offset: 19vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(2) {
  --bubble-left-offset: 51vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(3) {
  --bubble-left-offset: 38vw;
  --bubble-radius: 6vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(4) {
  --bubble-left-offset: 83vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(5) {
  --bubble-left-offset: 25vw;
  --bubble-radius: 9vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(6) {
  --bubble-left-offset: 5vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(7) {
  --bubble-left-offset: 56vw;
  --bubble-radius: 4vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(8) {
  --bubble-left-offset: 59vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(9) {
  --bubble-left-offset: 52vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 6s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(10) {
  --bubble-left-offset: 98vw;
  --bubble-radius: 9vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(11) {
  --bubble-left-offset: 7vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(12) {
  --bubble-left-offset: 56vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(13) {
  --bubble-left-offset: 52vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(14) {
  --bubble-left-offset: 79vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(15) {
  --bubble-left-offset: 73vw;
  --bubble-radius: 1vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(16) {
  --bubble-left-offset: 56vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(17) {
  --bubble-left-offset: 75vw;
  --bubble-radius: 6vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(18) {
  --bubble-left-offset: 60vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(19) {
  --bubble-left-offset: 8vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(20) {
  --bubble-left-offset: 26vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(21) {
  --bubble-left-offset: 21vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(22) {
  --bubble-left-offset: 68vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(23) {
  --bubble-left-offset: 63vw;
  --bubble-radius: 5vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(24) {
  --bubble-left-offset: 72vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(25) {
  --bubble-left-offset: 44vw;
  --bubble-radius: 1vw;
  --bubble-float-duration: 6s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(26) {
  --bubble-left-offset: 45vw;
  --bubble-radius: 5vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(27) {
  --bubble-left-offset: 60vw;
  --bubble-radius: 7vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(28) {
  --bubble-left-offset: 51vw;
  --bubble-radius: 5vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(29) {
  --bubble-left-offset: 42vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(30) {
  --bubble-left-offset: 42vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(31) {
  --bubble-left-offset: 94vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(32) {
  --bubble-left-offset: 53vw;
  --bubble-radius: 4vw;
  --bubble-float-duration: 7s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(33) {
  --bubble-left-offset: 49vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 6s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(34) {
  --bubble-left-offset: 21vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(35) {
  --bubble-left-offset: 43vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(36) {
  --bubble-left-offset: 27vw;
  --bubble-radius: 5vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 2s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(37) {
  --bubble-left-offset: 25vw;
  --bubble-radius: 1vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(38) {
  --bubble-left-offset: 63vw;
  --bubble-radius: 9vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(39) {
  --bubble-left-offset: 4vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 9s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(40) {
  --bubble-left-offset: 55vw;
  --bubble-radius: 9vw;
  --bubble-float-duration: 6s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(41) {
  --bubble-left-offset: 40vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 10s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(42) {
  --bubble-left-offset: 3vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 8s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(43) {
  --bubble-left-offset: 11vw;
  --bubble-radius: 9vw;
  --bubble-float-duration: 6s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 0s;
  --bubble-sway-delay: 1s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(44) {
  --bubble-left-offset: 38vw;
  --bubble-radius: 4vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(45) {
  --bubble-left-offset: 61vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(46) {
  --bubble-left-offset: 10vw;
  --bubble-radius: 3vw;
  --bubble-float-duration: 12s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 3s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(47) {
  --bubble-left-offset: 83vw;
  --bubble-radius: 2vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 2s;
  --bubble-sway-delay: 3s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(48) {
  --bubble-left-offset: 35vw;
  --bubble-radius: 10vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 6s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 0s;
  --bubble-sway-type: sway-left-to-right;
}
.bubble:nth-child(49) {
  --bubble-left-offset: 49vw;
  --bubble-radius: 6vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 5s;
  --bubble-float-delay: 4s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}
.bubble:nth-child(50) {
  --bubble-left-offset: 6vw;
  --bubble-radius: 8vw;
  --bubble-float-duration: 11s;
  --bubble-sway-duration: 4s;
  --bubble-float-delay: 1s;
  --bubble-sway-delay: 4s;
  --bubble-sway-type: sway-right-to-left;
}

@keyframes float-up {
  to {
    transform: translateY(-175vh);
  }
}
@keyframes sway-left-to-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes sway-right-to-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>
</head>
<body>
  <div class="bubbles">
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
  <div class="bubble"></div>
</div>
</body>
</html>

5. By Adam Abundis

Made by Adam Abundis. Infinite Pattern Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap') repeat scroll 0 0 rgba(0, 0, 0 , 0);

body {
  background: #fff;
}

.title {
  font-size: 2.5rem;
  font-family: 'Lobster', cursive;
}

.wrapper {
  animation: scroll 70s linear infinite;
  background: url("https://images.unsplash.com/photo-1465146633011-14f8e0781093?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3450&q=80"), #111111;
  color: #eee;
  height: 100vh;
  min-width: 360px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  
}

@keyframes scroll {
   100%{
    background-position:0px -3000px;
  }
}

@media (prefers-reduced-motion) {
  .wrapper {
    animation: scroll 200s linear infinite;
  }
}

@media (min-width: 670px) {
  .title {
    font-size: 5rem;
  }
}
</style>
</head>
<body>
  <article class="wrapper">
  <h2 class="title">Pattern Animation</h2>
</article>
</body>
</html>

6. By Yusuke Nakaya

Made by Yusuke Nakaya. Black and Red Strips Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
<style>
:root {
  --stripe-size: 100px;
  --color1: #c44;
  --color2: #313131;
  --duration: 2s;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.stripe {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.stripe_inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 8rem;
  text-align: center;
  font-family: "Anton", sans-serif;
  color: rgba(255, 255, 255, 0);
  background: repeating-linear-gradient(45deg, var(--color1) 25%, var(--color1) 50%, var(--color2) 50%, var(--color2) 75%);
  background-size: var(--stripe-size) var(--stripe-size);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-animation: stripeBackgroundPosition var(--duration) linear infinite;
          animation: stripeBackgroundPosition var(--duration) linear infinite;
}
.stripe::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + var(--stripe-size));
  height: 100%;
  background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
  background-size: var(--stripe-size) var(--stripe-size);
  -webkit-animation: stripeTransform var(--duration) linear infinite;
          animation: stripeTransform var(--duration) linear infinite;
}
.stripe::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(27, 39, 53, 0) 0%, #090a0f 100%);
}

@-webkit-keyframes stripeTransform {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--stripe-size) * -1));
  }
}

@keyframes stripeTransform {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--stripe-size) * -1));
  }
}
@-webkit-keyframes stripeBackgroundPosition {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc(var(--stripe-size) * -1) 0;
  }
}
@keyframes stripeBackgroundPosition {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: calc(var(--stripe-size) * -1) 0;
  }
}
</style>
</head>
<body>
  <div class="stripe">
  <div class="stripe_inner">WARNING</div>
</div>
</body>
</html>

7. By Ryan Mulligan

Made by Ryan Mulligan. CSS linear-gradient Background animations. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
  --s: 25vmin;
  --p: calc(var(--s) / 2);
  --c1: pink;
  --c2: dodgerblue;
  --c3: white;
  --bg: var(--c3);
  --d: 4000ms;
  --e: cubic-bezier(0.76, 0, 0.24, 1);
  
  background-color: var(--bg);
  background-image:
    linear-gradient(45deg, var(--c1) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c2) 75%);
  background-size: var(--s) var(--s);
  background-position: 
    calc(var(--p) *  1) calc(var(--p) *  0), 
    calc(var(--p) * -1) calc(var(--p) *  1), 
    calc(var(--p) *  1) calc(var(--p) * -1), 
    calc(var(--p) * -1) calc(var(--p) *  0);
  -webkit-animation: 
    color var(--d) var(--e) infinite,
    position var(--d) var(--e) infinite;
          animation: 
    color var(--d) var(--e) infinite,
    position var(--d) var(--e) infinite;
}

@-webkit-keyframes color {
  0%, 25% {
    --bg: var(--c3);
  }
  26%, 50% {
    --bg: var(--c1);
  }
  51%, 75% {
    --bg: var(--c3);
  }
  76%, 100% {
    --bg: var(--c2);
  }
}

@keyframes color {
  0%, 25% {
    --bg: var(--c3);
  }
  26%, 50% {
    --bg: var(--c1);
  }
  51%, 75% {
    --bg: var(--c3);
  }
  76%, 100% {
    --bg: var(--c2);
  }
}

@-webkit-keyframes position {
  0% {
    background-position: 
      calc(var(--p) *  1) calc(var(--p) *  0), 
      calc(var(--p) * -1) calc(var(--p) *  1), 
      calc(var(--p) *  1) calc(var(--p) * -1), 
      calc(var(--p) * -1) calc(var(--p) *  0);
  }
  25% {
    background-position: 
      calc(var(--p) *  1) calc(var(--p) *  4), 
      calc(var(--p) * -1) calc(var(--p) *  5), 
      calc(var(--p) *  1) calc(var(--p) *  3), 
      calc(var(--p) * -1) calc(var(--p) *  4);
  }
  50% {
    background-position: 
      calc(var(--p) *  3) calc(var(--p) * 8), 
      calc(var(--p) * -3) calc(var(--p) * 9), 
      calc(var(--p) *  2) calc(var(--p) * 7), 
      calc(var(--p) * -2) calc(var(--p) * 8);
  }
  75% {
    background-position: 
      calc(var(--p) *  3) calc(var(--p) * 12), 
      calc(var(--p) * -3) calc(var(--p) * 13), 
      calc(var(--p) *  2) calc(var(--p) * 11), 
      calc(var(--p) * -2) calc(var(--p) * 12);
  }
  100% {    
    background-position: 
      calc(var(--p) *  5) calc(var(--p) * 16), 
      calc(var(--p) * -5) calc(var(--p) * 17), 
      calc(var(--p) *  5) calc(var(--p) * 15), 
      calc(var(--p) * -5) calc(var(--p) * 16);
  }
}

@keyframes position {
  0% {
    background-position: 
      calc(var(--p) *  1) calc(var(--p) *  0), 
      calc(var(--p) * -1) calc(var(--p) *  1), 
      calc(var(--p) *  1) calc(var(--p) * -1), 
      calc(var(--p) * -1) calc(var(--p) *  0);
  }
  25% {
    background-position: 
      calc(var(--p) *  1) calc(var(--p) *  4), 
      calc(var(--p) * -1) calc(var(--p) *  5), 
      calc(var(--p) *  1) calc(var(--p) *  3), 
      calc(var(--p) * -1) calc(var(--p) *  4);
  }
  50% {
    background-position: 
      calc(var(--p) *  3) calc(var(--p) * 8), 
      calc(var(--p) * -3) calc(var(--p) * 9), 
      calc(var(--p) *  2) calc(var(--p) * 7), 
      calc(var(--p) * -2) calc(var(--p) * 8);
  }
  75% {
    background-position: 
      calc(var(--p) *  3) calc(var(--p) * 12), 
      calc(var(--p) * -3) calc(var(--p) * 13), 
      calc(var(--p) *  2) calc(var(--p) * 11), 
      calc(var(--p) * -2) calc(var(--p) * 12);
  }
  100% {    
    background-position: 
      calc(var(--p) *  5) calc(var(--p) * 16), 
      calc(var(--p) * -5) calc(var(--p) * 17), 
      calc(var(--p) *  5) calc(var(--p) * 15), 
      calc(var(--p) * -5) calc(var(--p) * 16);
  }
}

@media (prefers-reduced-motion) {
  body {
    -webkit-animation: none;
            animation: none;
  }
}
</style>
</head>
<body>
</body>
</html>

8. By Vaibhav Arora

Made by Vaibhav Arora. Animated Ripples background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
  background: #3399ff;
}


.circle{
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: ripple 15s infinite;
  box-shadow: 0px 0px 1px 0px #508fb9;
}

.small{
  width: 200px;
  height: 200px;
  left: -100px;
  bottom: -100px;
}

.medium{
  width: 400px;
  height: 400px;
  left: -200px;
  bottom: -200px;
}

.large{
  width: 600px;
  height: 600px;
  left: -300px;
  bottom: -300px;
}

.xlarge{
  width: 800px;
  height: 800px;
  left: -400px;
  bottom: -400px;
}

.xxlarge{
  width: 1000px;
  height: 1000px;
  left: -500px;
  bottom: -500px;
}

.shade1{
  opacity: 0.2;
}
.shade2{
  opacity: 0.5;
}

.shade3{
  opacity: 0.7;
}

.shade4{
  opacity: 0.8;
}

.shade5{
  opacity: 0.9;
}

@keyframes ripple{
  0%{
    transform: scale(0.8);
  }
  
  50%{
    transform: scale(1.2);
  }
  
  100%{
    transform: scale(0.8);
  }
}
</style>
</head>
<body>
  <div class='ripple-background'>
  <div class='circle xxlarge shade1'></div>
  <div class='circle xlarge shade2'></div>
  <div class='circle large shade3'></div>
  <div class='circle mediun shade4'></div>
  <div class='circle small shade5'></div>
</div>
</body>
</html>