<div class="blob-wrapper">
  <div class="blob"></div>
</div>
<p class="style">border-radius: <span>Haha, blobs are funny :D</span>;</p>
<button onclick="generateBlob()">Click me</button>
* {
  text-align: center;
}
.blob-wrapper {
  max-width: 400px;
  height: 400px;
  margin: 0 auto;
}
.blob {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  background: url(https://pbs.twimg.com/profile_images/881112848990187522/P5wd4Qiv_400x400.jpg);
  background-size: cover;
}

p {
  font-size: 20px;
  font-family: monospace,monospace;
}

button {
  margin: 0 0 0 20px;
  background: #1abc9c;
  color: white;
  border: 0;
  padding: 10px 30px;
  border-radius: 2px;
  font-size: 16px;
  font-weight: bold;
  transition-duration: 0.4s;
  &:hover {
    background: #17aa8d;
    cursor: pointer;
  }
}

View Compiled
function generateBlob() {
  const percentage1 = _.random(25, 75);
  const percentage2 = _.random(25, 75);
  const percentage3 = _.random(25, 75);
  const percentage4 = _.random(25, 75);
  var percentage11 = 100 - percentage1;
  var percentage21 = 100 - percentage2;
  var percentage31 = 100 - percentage3;
  var percentage41 = 100 - percentage4;
  var borderRadius = `${percentage1}% ${percentage11}% ${percentage21}% ${percentage2}% / ${percentage3}% ${percentage4}% ${percentage41}% ${percentage31}%`;
  $(".blob").css("border-radius", borderRadius);
  $(".style span").html(borderRadius)
}

$(document).ready(function(){
  generateBlob();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js