JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<svg version="1.1" id="HelmOfAve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="453.543px" height="453.543px" viewBox="0 0 453.543 453.543" enable-background="new 0 0 453.543 453.543" xml:space="preserve">
<pattern y="453.542" width="69" height="69" patternUnits="userSpaceOnUse" id="Polka_Dot_Pattern" viewBox="2.125 -70.896 69 69" overflow="visible">
	<g>
		<polygon fill="none" points="71.125,-1.896 2.125,-1.896 2.125,-70.896 71.125,-70.896   "/>
		<polygon fill="#F7BC60" points="71.125,-1.896 2.125,-1.896 2.125,-70.896 71.125,-70.896   "/>
		<g>
			<path fill="#FFFFFF" d="M61.772-71.653c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.063-0.165,0.128     c-0.05,0.063-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45     c0.104-0.074,0.287-0.01,0.406-0.051c0.2-0.069,0.339-0.263,0.376-0.46c0.016-0.082,0.01-0.145,0.039-0.221     c0.039-0.103,0.111-0.16,0.09-0.293c-0.01-0.062-0.052-0.12-0.064-0.187c-0.022-0.114,0.002-0.224,0-0.337     c-0.003-0.2,0.017-0.379-0.078-0.55c-0.38-0.688-1.236-0.929-1.975-0.789c-0.18,0.034-0.287,0.126-0.442,0.207     c-0.17,0.088-0.139,0.166-0.318,0.224c-0.081,0.026-0.216,0.124-0.215,0.224c0.001,0.115,0.005,0.051,0.012,0.169     c-0.021,0.011-0.021-0.005-0.03-0.025"/>
			<path fill="#FFFFFF" d="M54.105-71.653c0.018,0.072,0.007,0.127-0.026,0.19c-0.053,0.101-0.112,0.063-0.165,0.128     c-0.05,0.063-0.099,0.276-0.079,0.362c-0.169,0.058-0.01,0.227-0.015,0.35c-0.002,0.05-0.041,0.105-0.045,0.161     c-0.01,0.119,0.017,0.266,0.068,0.37c0.097,0.198,0.268,0.413,0.435,0.544c0.19,0.148,0.365,0.572,0.608,0.631     c0.177,0.042,0.384-0.104,0.543-0.143c0.18-0.043,0.397,0.01,0.571-0.053c0.222-0.079,0.127-0.337,0.288-0.45    ...

CSS

#HelmOfAve {
   margin: 0px auto;
}

JavaScript

setTimeout(function changeGradient(){
    
    function getRandomInt (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    var numbers = [];
    while(numbers.length < 3) {
        var sum; 
        if(numbers.length > 0) {
            sum = numbers.reduce(function(prev, cur) {
                return prev + cur;
            });
        } else {
           sum = 1; 
        }
        
        numbers.push(getRandomInt(1,100-sum));
    }
    
    var sum = numbers.reduce(function(prev, cur) {
        return prev + cur;
    });
    
    if(sum < 100) {
        numbers[numbers.length-1] = numbers[numbers.length-1] + (100-sum);
    }
    var randomColor = "rgb("+ getRandomInt(0,255) + ","+ getRandomInt(0,255) + ","+ getRandomInt(0,255) + ")";
    
    $("#HelmOfAve path,#HelmOfAve polygonm,#HelmOfAve line,#HelmOfAve circle").attr("stroke", randomColor);
    $("#HelmOfAve").attr("style", "text-align: center; width: 100%;background: linear-gradient( " + getRandomInt(1,359)  + "deg, rgb(" +
                    getRandomInt(0,255) + "," + getRandomInt(0,255) + "," + getRandomInt(0,255) + ") " +  numbers.shift() + "% , rgb(" +
                    getRandomInt(0,255) + "," + getRandomInt(0,255) + "," + getRandomInt(0,255) + ") " +  numbers.shift() + "% , rgb(" +
                    getRandomInt(0,255) + "," + getRandomInt(0,255) + "," + getRandomInt(0,255) + "));");
                    
    setTimeout(changeGradient, 1000);
}, 100);