Animated flower Using HTML, CSS And JS

Taohedul Islam

3493

This code makes a flower that awesome looking and animates the flower with changing color. I hope you enjoy the output of this code.

 <div id="gameBox">
  <div id="trace"></div>
  <div id="trace2"></div>
  <div id="gameBox"></div>
  <div id="trace"></div>
  <div id="trace2"></div>
</div>

Try it Yourself >>

 body {
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:linear-gradient(-45deg, #111, #222);
  background-size:1vw 1vw;
  animation:wave 45s linear 9.5s infinite, colorSwap 5s linear 9.5s infinite;
}
@keyframes wave {
  100%{ transform:rotate(360deg); }
}

@keyframes colorSwap {
  50% { filter:hue-rotate(360deg); }
}

#gameBox {
  width:10px;
  height:10px;
/*   background:#222; */
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);  
}

@keyframes grow {
  100% { width:100vw; height:100vh; transform:translate(-50%, -50%) rotate(3240deg); }
}

#trace {
  width:1px;
  height:1px;
  background:#f00;
  position:absolute;
  top:0;
  left:0;
}
#trace2 {
  width:1px;
  height:1px;
  background:#f00;
  position:absolute;
  bottom:0;
  right:0;
}

.dot {
  position: absolute;
  width: 50px;
  height: 50px;
  transform: translate(-50%,-50%);
  border-radius:50%;
  box-shadow:0 0 15px black;
}
/* .dot:nth-child(even) {
  background:green !important;
}
.dot:nth-child(odd) {
  background:darkred !important;
} */

Try it Yourself >>

var box = document.getElementById('trace')
var box2 = document.getElementById('trace2')
var boxy = document.getElementById('gameBox')

function drawCircle(){  
  var deets = box.getBoundingClientRect()
  var deets2 = box2.getBoundingClientRect()
  
  var x = deets.left
  var y = deets.top
  var color = "hsl("+Math.floor(Math.random()*360)+"deg, 100%, 50%)"
    
  var b = document.createElement('div')
  b.className = "dot"
  b.style.left = x+"px"
  b.style.top = y+"px"
  b.style.background = color
  
  document.getElementsByTagName('body')[0].appendChild(b)   
  
  var x2 = deets2.left
  var y2 = deets2.top
  var color2 = "hsl("+Math.floor(Math.random()*360)+"deg, 100%, 50%)"
    
  var c = document.createElement('div')
  c.className = "dot"
  c.style.left = x2+"px"
  c.style.top = y2+"px"
  c.style.background = color2
  
  document.getElementsByTagName('body')[0].appendChild(c)   
  
}

num = 10
document.getElementById('gameBox').style.animation = "grow "+num+"s linear forwards"

var populate = setInterval(drawCircle,1000/60)

setTimeout(function(){
  clearInterval(populate)
},1000*num)

Try it Yourself >>