JSFiddle - React, Tailwind, and code Playground
HTML
<div id="element"></div>
CSS
#element {
width: 100px;
height: 60px;
background-repeat: none;
}
JavaScript
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var element = document.getElementById('element');
var generateSVG = function (cor) {
var el = '<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="114px" height="66px" viewBox="0 0 114 66" xml:space="preserve"><polygon id="polygon" fill="' + cor + '" points="114,0 0,66 114,66"/></svg>';
return "url('data:image/svg+xml;utf8," + el + "')"
}
setInterval(function () {
var cor = getRandomColor();
var svg = generateSVG(cor);
element.style.backgroundImage = svg;
}, 1000);