JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="full-bg" width="800" height="600" viewbox="0 0 800 600"  xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <clipPath id="svgPath">
        <circle r="40" cy="50" cx="50" />
        <circle r="74.576" cy="235" cx="193.949" />
        <circle r="47.034" cy="108.305" cx="426.576" />
        <circle r="43.644" cy="255.763" cx="346.915" />
        <circle r="35.17" cy="82.882" cx="255.39" />
  </clipPath>
  <g fill="#000">
    <circle r="40" cy="50" cx="50" />
    <circle r="74.576" cy="235" cx="193.949" />
    <circle r="47.034" cy="108.305" cx="426.576" />
    <circle r="43.644" cy="255.763" cx="346.915" />
    <circle r="35.17" cy="82.882" cx="255.39" />
  </g>
</svg>
<div class="wrapper">
    <div class="content clipped">
      <div class="centered">
      </div>
    </div>
</div>

CSS

body{
  margin: 0;
  padding: 0;
}
.wrapper, .full-bg{
    width: 100%;
    height: 100%;
}

.content.clipped{
    -webkit-clip-path: url(#svgPath);
}
.centered{
      width: 70%;
      height: 70%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #c8c;
}