JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="canvas" id="canvas">

</div>

CSS

.canvas {width:800px;height:500px;background-color:#eeeeee;position:relative;}

.ccc {width:10px;height:10px;background-color:#000000;position:absolute;border-radius:500%;}

JavaScript

function slide() {

setTimeout(function(){

var numWidth = Math.floor(Math.random() * 790) + 1;
var numHeight = Math.floor(Math.random() * 490) + 1;
var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

var canid = document.getElementById('canvas');
var orig = document.getElementById('canvas').innerHTML;

canid.innerHTML = orig + "<div class='ccc' style='top:" + numHeight + "px;left:" + numWidth + "px;background-color:" + randomColor + ";'></div>";

slide();

}, 50);

}

slide();