JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<div style="margin: 0px auto; text-align: center;">
<svg  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="300" height="150" id="HelmOfAve">
  <defs id="defs4"/>
  <g id="layer1">
    <path d="M 141.11396,41.91315 C 138.77397,41.91315 128.89396,32.553149 127.59396,31.25315 C 122.65397,24.493157 119.79396,25.013152 117.97396,27.09315 C 116.67396,28.913148 117.45397,30.993153 120.57396,33.59315 C 134.09395,45.293138 142.41396,53.093152 141.37396,55.17315 C 140.59396,57.513148 139.03394,56.47315 117.71396,56.47315 C 58.174023,56.47315 48.553963,58.293146 47.513964,54.65315 C 46.993964,52.053153 47.513963,41.913148 46.993964,40.35315 C 44.393966,33.593157 20.213964,35.413152 20.213964,37.75315 C 20.213964,40.353147 39.193965,39.313151 41.013964,40.35315 C 42.833962,41.393149 44.653961,54.653152 41.793964,56.47315 C 39.713966,57.773149 21.513963,55.433152 20.473964,57.77315 C 19.953964,59.073149 20.473965,59.59315 22.033964,59.85315 C 41.273944,62.193148 43.093964,56.213162 43.093964,68.17315 C 43.093964,73.113145 43.093963,73.633151 42.313964,74.67315 C 40.233966,78.833146 24.113961,75.453151 20.993964,76.75315 C 20.213964,77.27315 20.213965,78.573151 21.253964,79.35315 C 21.513963,79.35315 41.013968,81.693146 45.433964,77.53315 C 49.853959,73.893154 46.733965,64.013147 48.553964,61.15315 C 50.373962,58.813152 114.85397,58.81315 122.65396,59.07315 C 135.39395,58.81315 138.25396,59.853155 136.69396,64.53315 C 135.91396,66.353148 119.27396,82.213152 117.97396,84.55315 C 116.15397,87.413147 117.71396,90.01315 119.01396,90.27315 C 122.65396,91.053149 134.87397,74.413146 139.03396,70.77315 C 145.01396,65.833155 146.57397,60.373158 149.69396,68.43315 L 149.95396,105.35315 L 149.95396,111.59315 C 145.53397,118.61314 115.63397,107.95316 118.23396,120.69315 C 119.01396,123.81315 117.71397,133.17315 119.27396,134.21315 C 119.79396,134.47315 121.35396,134.73314 121.61396,124.85315 C 121.87396,117.31316 121.87397,117.57315...

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,#HelmOfAve g").attr("stroke", randomColor);
    $("#HelmOfAve").attr("style", "text-align: center; 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);