JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mask wide"></div>
<div class="mask short"></div>
<svg viewBox="0 0 119.5 290.5">
  <defs>
    <clippath id="clip">
      <path class="st0" d="M12.1,0l27.1,35.2L18.8,72.1l49.3,41.3L9.9,172.6c0,0,43.6,47.1,44.4,44.9c0.9-2.2,36,12.9,32,13.3
	s-63.6,12-63.6,12s6.2,17.8,7.6,17.8c1.3,0,55.1,0.9,53.8,0c-1.3-0.9-47.6,17.3-47.6,17.3l-21.3,12.6h104.2V0H12.1z"/>
    </clippath>
  </defs>
</svg>

CSS

.st0{fill:#000;}

div {
  height: 100px;
  background: red;
  margin-bottom: 20px;
}

.wide {
  width: 80%;
}
.short {
  width: 20%;
}

.mask {
  clip-path: url(#clip);
}