JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<svg  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="300" height="300" id="HelmOfAve">
  <defs id="defs4"/>
  <g id="layer1">
    <path d="M 131.97332,279.73325 C 128.0835,278.11593 124.37299,274.71236 122.99913,271.50145 C 121.63767,268.31951 121.67484,259.89297 123.065,256.56582 C 125.28865,251.24389 135.76225,241.94633 139.5337,241.94633 C 140.12663,241.94633 140.75483,241.52311 140.92969,241.00585 C 141.10456,240.48859 141.33958,233.46323 141.45194,225.39395 C 141.69302,208.08211 143.23263,190.28925 144.74987,187.28102 C 145.9351,184.93108 147.03788,177.24157 146.18967,177.24157 C 145.89749,177.24157 143.28951,177.92776 140.39416,178.76644 C 137.49881,179.60512 133.60632,180.63659 131.74418,181.0586 C 129.88203,181.48061 126.32703,182.63971 123.84418,183.63436 C 117.80696,186.05294 100.15084,195.11494 98.263222,196.76378 C 97.435603,197.48671 92.403732,200.54704 87.081283,203.56451 C 76.983014,209.28955 69.771781,215.23009 65.866705,221.04087 C 64.674859,222.81435 62.426202,225.82818 60.869692,227.73828 L 58.039678,231.2112 L 63.856208,232.14469 C 70.918138,233.27807 71.721854,233.6758 73.824255,237.07755 C 75.228191,239.34918 75.434486,240.59193 75.194965,245.33509 C 74.933295,250.51693 74.725043,251.11249 72.299721,253.61479 C 66.187362,259.92114 58.490023,262.2786 48.861917,260.79308 C 40.489135,259.50123 38.15063,258.58945 34.08216,255.03045 C 28.407116,250.06607 28.330177,246.4967 33.755416,239.87225 C 36.929335,235.99676 41.795216,233.40319 48.539281,231.99228 C 52.499386,231.16378 53.282667,230.67636 55.6869,227.54438 C 57.171972,225.60979 59.50643,222.17256 60.874575,219.9061 C 64.252991,214.30945 73.096718,205.94 79.247154,202.51881 C 84.649927,199.51353 93.526894,193.73829 96.006079,191.6157 C 96.833698,190.90712 100.72727,188.85041 104.65846,187.04522 C 108.58965,185.24004 112.32188,183.32838 112.95231,182.7971 C 115.91715,180.29851 131.16907,175.25216 143.97037,172.53427 C 147.33947,171.81897...

CSS

#HelmOfAve {
   margin: 0px auto;
}

JavaScript

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