CSS lavaLamp

by trentHarlem

HTML

<div class="grid-container">
      <div id="one">
      
      </div>
      <div id="two">
    
      </div>
      <div id="three">
     
      </div>
      <div id="four">
      
      </div>
  </div>

CSS

* {
  background: linear-gradient(darkorange 0%, red 50%, orange 100%);
  margin: 0;
  padding: 0;
  max-height: 20000px;
  transition: all 0.3s ease;
  
}

.honeyDew {
  background: linear-gradient(45deg, darkorange 0%, red 50%, orange 100%);
  /* background: linear-gradient(100deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); */
  border: 3px solid rgba(255, 0, 128, 0.541);
  border-radius: 50px;
  /* height: 333px; */
  width: 100%;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.432) inset;
  /* background-size: contain; */
  /* transition: all 10s ease; */

}

.grid-container {
  transition: all 0.3s ease;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "one two"
    "three four"
}


#one {
  grid-area: 1 / 1 / 2 / 2;
  /* transition: all 0.3s ease; */
  
}

#two {
  grid-area: 1 / 2 / 2 / 3;
  /* transition: all 0.3s ease; */
  
}

#three {
  grid-area: 2 / 1 / 3 / 2;
  /* transition: all 0.3s ease; */
  
}

#four {
  grid-area: 2 / 2 / 3 / 3;
  /* transition: all 0.3s ease; */
  
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.breathe {
  display: inline-flex;
  animation: breathe 16s ease-in infinite alternate;
  animation-fill-mode: forwards;
}
  @keyframes breathe {
    0% {
      width: 10px;
    }

    0% {
      height: 10px;
    }

    100% {
      width: 100%;
    }

    100% {
      height: 330px;
    }
  }

JavaScript

var i = setInterval(timer, 4000);

function timer() {
  
    {
      let div = document.createElement('div');
  div.classList.add('honeyDew');
  div.classList.add('breathe');
  document.getElementById("one").appendChild(div);   
  }

  {
    let div = document.createElement('div');
  div.classList.add('honeyDew');
  div.classList.add('breathe');
  document.getElementById("two").appendChild(div);   
  }
  {
  let div = document.createElement('div');
  div.classList.add('honeyDew');
  div.classList.add('breathe');
  document.getElementById("three").appendChild(div);   
  }
  {
  let div = document.createElement('div');
  div.classList.add('honeyDew');
  div.classList.add('breathe');
  document.getElementById("four").appendChild(div);   
  }
};