JSFiddle - React, Tailwind, and code Playground

by luka kupunia

CSS

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow:hidden;
  background: black;
}
.circle {
  animation: circle linear 1s infinite;
}
@keyframes circle {
  50% { transform: rotate(180deg) translate(100px , 100px);}
  100% { transform: rotate(360deg) translate(0px , 0px);}
}

JavaScript

document.body.addEventListener('click',function(e){
	var r = Math.floor(Math.random() * 255);
  var g = Math.floor(Math.random() * 255);
  var b = Math.floor(Math.random() * 255); 
  var x = Math.floor(Math.random() * 600);
  var y = Math.floor(Math.random() * 600);
	var a = document.createElement('div');
  a.style.position = 'absolute';
  a.style.left = x + 'px';
  a.style.top = y + 'px';
  a.style.width = '20px';
  a.style.height = '20px';
  a.style.borderRadius = '50%';
  a.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
  this.append(a);
})

paintBubbles = function(){
	var r = Math.floor(Math.random() * 255);
  var g = Math.floor(Math.random() * 255);
  var b = Math.floor(Math.random() * 255); 
  var x = Math.floor(Math.random() * 100);
  var y = Math.floor(Math.random() * 100);
	var a = document.createElement('div');
  a.classList.add('circle');
  a.style.position = 'absolute';
  a.style.left = x + 'vw';
  a.style.top = y + 'vh';
  a.style.width = '20px';
  a.style.height = '20px';
  /* a.style.borderRadius = '50%' */;
  a.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
  /* document.body.append(a) */;
}
setInterval(paintBubbles, 30);