<div class='flex'>
  <div class="item">
    <div class="icon icon1"></div>
    <p>Adobe <br> AfterEffects</p>
    <div class="ratio"></div>
  </div>
  <div class="item">
    <div class="icon icon2"></div>
    <p>Adobe <br> Photoshop</p>
    <div class="ratio"></div>
  </div>
  <div class="item">
    <div class="icon icon3"></div>
    <p>Adobe <br> Premier</p>
    <div class="ratio"></div>
  </div>
  <div class="item">
    <div class="icon icon4"></div>
    <p>Adobe <br> Illustrator</p>
    <div class="ratio"></div>
  </div>
</div>

.icon {
  width: 90px;
  height: 100px;
  background: url(https://img.pngio.com/download-icons-adobe-illustrator-photoshop-premiere-pro-el-fonts-adobe-illustrator-icon-png-1600_1023.png);
  background-size: 285px 220px;
}

.icon2 {
  background-position: 0 -120px;
}

.icon3 {
  background-position: -100px 0;
}

.icon4 {
  background-position: 90px 100px;
}

.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

p {
  text-align: center;
}

let html = `
<svg viewBox="0 0 500 95" xmlns="http://www.w3.org/2000/svg" id="svg">
  <defs>
    <clipPath id="clip">
      <path d="M49,0 64,30 100,35 75,57 80,95 50,78 18,95 24,57 0,36 31,30 M100,36 133,30 149,0 164,30 200,36 175,57 180,95 152,78 119,95 124,60 M200,36 233,30 249,0 264,30 300,36 275,57 280,95 252,78 219,95 223,60 M300,36 333,30 349,0 364,30 400,36 375,57 380,95 352,78 319,95 324,60 M400,36 433,30 449,0 464,30 500,36 475,57 480,95 452,78 419,95 424,60" />
    </clipPath>
  </defs>
  <rect width="100%" height="100%" fill="#ccc" clip-path="url(#clip)" />
  <rect id="yellow" width="300px" height="100%" fill="yellow" clip-path="url(#clip)" id="ratio" />
</svg>`;

document.querySelectorAll(".ratio").forEach(function (el) {
  el.innerHTML = html;
});