JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="600"
   height="600"
   id="HelmOfAve"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="Vegvisir.svg">
  <defs
     id="defs4">
    <filter
       id="filter2999"
       inkscape:menu-tooltip="Make the lightest parts of the object progressively transparent"
       inkscape:menu="Transparency utilities"
       inkscape:label="Light eraser"
       height="1"
       width="1"
       y="0"
       x="0"
       color-interpolation-filters="sRGB">
      <feColorMatrix
         id="feColorMatrix3001"
         result="result14"
         type="luminanceToAlpha"
         in="SourceGraphic" />
      <feComposite
         id="feComposite3003"
         in2="result14"
         in="SourceGraphic"
         result="fbSourceGraphic"
         operator="out" />
      <feBlend
         id="feBlend3005"
         in2="fbSourceGraphic"
         mode="normal"
         result="result15" />
    </filter>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.98994949"
     inkscape:cx="163.54416"
     inkscape:cy="271.79808"
     inkscape:document-units="px"
     inkscape:current-layer="g2996"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1018"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     fit-margin-bottom="0"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
    ...

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);