Use variable in JQuery CSS with clip-path

Question

How to use a variable in JQuery CSS with clip-path. I've loged the result of the variable and it seems to be exacly the same than the working css code, as you see on img1. Any ideas?

$(document).ready(function(){

  //WORKING
  $('.img1').css({"clip-path": "polygon(30% 0%, 100% 23%, 54% 50%, 100% 100%, 70% 100%, 79% 59%, 10% 84%, 52% 49%)"});

  //NOT WORKING
  var random1 = (Math.floor(Math.random() * 100) + 1) + "%",
      random2 = Math.floor(Math.random() * 100) + 1 + "%",
      random3 = Math.floor(Math.random() * 100) + 1 + "%",
      random4 = Math.floor(Math.random() * 100) + 1 + "%",
      random5 = Math.floor(Math.random() * 100) + 1 + "%",
      random6 = Math.floor(Math.random() * 100) + 1 + "%",
      random7 = Math.floor(Math.random() * 100) + 1 + "%",
      random8 = Math.floor(Math.random() * 100) + 1 + "%",
      clippi = '"clip-path": "polygon(' +random1 + ' ' + random2 + ','+ ' ' + random3 + ' ' + random4 + ','+ ' ' + random5 + ' ' + random6 + ','+ ' ' + random7 + ' ' + random8 + ','+ ' ' + random1 + ' ' + random2 + ','+ ' ' + random3 + ' ' + random4 + ','+ ' ' + random5 + ' ' + random6  + ','+ ' ' + random7  + ' ' + random8+')"';

    console.log(clippi)
    $('.img2').css({clippi});


});

img{
  width: 40%;
}

.img1{
  border: 5px solid red;
}

.img2{
  border: 5px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="http://placekitten.com/1200/1600">
<img class="img2" src="http://placekitten.com/900/900">

Answer 1

This is happening because you're passing a string instead of an object to the css function. I was able to fix your example by altering the css declaration like so:

$(document).ready(function(){

  //WORKING
  $('.img1').css({"clip-path": "polygon(30% 0%, 100% 23%, 54% 50%, 100% 100%, 70% 100%, 79% 59%, 10% 84%, 52% 49%)"});

  //NOT WORKING
  var random1 = (Math.floor(Math.random() * 100) + 1) + "%",
      random2 = Math.floor(Math.random() * 100) + 1 + "%",
      random3 = Math.floor(Math.random() * 100) + 1 + "%",
      random4 = Math.floor(Math.random() * 100) + 1 + "%",
      random5 = Math.floor(Math.random() * 100) + 1 + "%",
      random6 = Math.floor(Math.random() * 100) + 1 + "%",
      random7 = Math.floor(Math.random() * 100) + 1 + "%",
      random8 = Math.floor(Math.random() * 100) + 1 + "%",
      clippi = random1 + ' ' + random2 + ','+ ' ' + random3 + ' ' + random4 + ','+ ' ' + random5 + ' ' + random6 + ','+ ' ' + random7 + ' ' + random8 + ','+ ' ' + random1 + ' ' + random2 + ','+ ' ' + random3 + ' ' + random4 + ','+ ' ' + random5 + ' ' + random6  + ','+ ' ' + random7  + ' ' + random8;

    console.log(clippi)
    $('.img2').css({"clip-path": 'polygon('+ clippi +')'});


});

img{
  width: 40%;
}

.img1{
  border: 5px solid red;
}

.img2{
  border: 5px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="http://placekitten.com/1200/1600">
<img class="img2" src="http://placekitten.com/900/900">