How to randomise background colour and svg

Question

I'm trying to make a basic landing page which randomises the background colour each time the page loads and also changes each time you click on the svg icon.

This is working okay so far, however is it possible to also randomise the colour of the icon rather than it just being white? I'm having trouble integrating the colour property of the svg into the javascript. Here is the code I'm currently using:

 $(function() { var randomColor = Math.floor(Math.random() * 16777215).toString(16); $("body").css({ backgroundColor: '#' + randomColor }); $("#colorcode").text("#" + randomColor); }); var safeColors = ['00', '33', '66', '99', 'cc', 'ff']; var rand = function() { return Math.floor(Math.random() * 6); }; var randomColor = function() { var r = safeColors[rand()]; var g = safeColors[rand()]; var b = safeColors[rand()]; return "#" + r + g + b; }; $("body").css({ backgroundColor: '#' + randomColor }); $(document).ready(function() { $('#Layer_1').click(function() { $('body').each(function() { $(this).css('background', randomColor()); }); }); }); 

 .cls-1 { fill: #fff; } 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <div style="width:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px; cursor: pointer"> <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <title>Artboard 1</title> <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon> </svg> 

Many thanks for your help. I'm quite new to Javascript so this is a bit of a learning curve for me.

Answer 1

You can change the color of svg by applying the fill CSS property to the svg element (in your case, the polygon )

$('#Layer_1 polygon').css('fill', randomColor());

 $(function() { var randomColor = Math.floor(Math.random() * 16777215).toString(16); $("body").css({ backgroundColor: '#' + randomColor }); $("#colorcode").text("#" + randomColor); }); var safeColors = ['00', '33', '66', '99', 'cc', 'ff']; var rand = function() { return Math.floor(Math.random() * 6); }; var randomColor = function() { var r = safeColors[rand()]; var g = safeColors[rand()]; var b = safeColors[rand()]; return "#" + r + g + b; }; $("body").css({ backgroundColor: '#' + randomColor }); $(document).ready(function() { $('#Layer_1').click(function() { $('body').css('background', randomColor()); $('#Layer_1 polygon').css('fill', randomColor()); }); }); 

 #svgdiv { width: 400px; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px; cursor: pointer } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="svgdiv"> <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon> </svg> </div> 

Answer 2

Sure, you Jquery can be simplified too.

just need to change the fill of.cls-1

 var safeColors = ['00', '33', '66', '99', 'cc', 'ff']; var rand = function() { return Math.floor(Math.random() * 6); }; var randomColor = function() { var r = safeColors[rand()]; var g = safeColors[rand()]; var b = safeColors[rand()]; return "#" + r + g + b; }; $(document).ready(function() { $('.cls-1').css('fill', randomColor()); $('body').css('background', randomColor()); $('#Layer_1').click(function() { $('.cls-1').css('fill', randomColor()); $('body').css('background', randomColor()); }); }); 

 .cross { width: 400px; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px; cursor: pointer; } 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <div class="cross"> <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <title>Artboard 1</title> <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon> </svg> 

Answer 3

you can target your svg icon the same as the background, but you need to use "fill" instead of "background-color" try replacing with this:

$(document).ready(function() {
    $(".cls-1").css("fill",randomColor())
    $('#Layer_1').click(function() {
      $('body').each(function() {
        $(this).css('background',randomColor());
        $(".cls-1").css("fill",randomColor())
      });
    });
  });

Answer 4

The smallest code!Enjoy it!

 function changecolor() { var colors = ["red", "blue", "yellow"]; Shuffle(colors); document.body.style.backgroundColor = colors[0]; } function Shuffle(o) { for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; 

 <body onload="changecolor()"> <h1>Hello World!</h1> </body>