Как можно сверстать данную картинку

.svg {
  width: 600px;
  margin: auto;
}

.red {
  fill: red;
}

.green {
  fill: green;
}

.blue {
  fill: blue;
}

.yellow {
  fill: yellow;
}

.pink {
  fill: pink;
}

.parent {
  stroke-width: 1.6;
  stroke: #d90000;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

<div class="svg">
  <svg viewBox="-3 193 150 106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <clipPath id="clip">
       <path  d="m31.972691 296.86328 23.906994-13.60714 0.0945-27.11979-24.190476-14.17411-23.906994 13.51265 0.1889881 27.87574s23.151042 13.41816 23.906994 13.51265z"/>
     </clipPath>
    </defs>
   <path  class="red" d="m0.5061738 223.81938 15.874999-9.16592 15.40253 8.88245v18.42633l-15.886812 8.98875-15.674199-8.98875z" />
    <image xlink:href="https://s.tb.ru/uploads/site232863/6a476d28-ef4b-49c7-a9f9-88218979d244/6a476d28-ef4b-49c7-a9f9-88218979d244-1560866832327.jpeg" x="0" y="242" width="60" height="60"  clip-path="url(#clip)"/>
    
  <path  class="blue" d="m64.48339 260.97847 16.342722-9.47233-0.188987-18.42634-15.591517-8.97694-15.969496 9.26042 0.0945 18.70982z"/>
   <path  class="yellow" d="m80.637125 233.0798 15.308035-9.26042-0.283482-17.76488-15.024553-8.88244-15.875 9.07143 0.283483 17.85937z"/>
   <path  class="pink" d="m95.94516 223.81938 23.52902-13.32366 23.907 13.60714v27.1198l-24.37947 13.98511-23.434526-13.89062z"/>
   <path  class="parent" d="m0.5061738 223.81938 15.874999-9.16592 15.40253 8.88245v18.42633l17.386909 10.11086-0.0945-18.70982 15.969496-9.26042-0.283483-17.85937 15.875-9.07143 15.024553 8.88244 0.283482 17.76488 23.52902-13.32366 23.907 13.60714v27.1198l-24.37947 13.98511"/>
  </svg>
</div>

.container {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  position: relative;
  margin: auto;
}

#elem1_1 {
  width: 70px;
  height: 70px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: coral;
  position: absolute;
  top: 70px;
  left: 20px;
}

#elem1_2 {
  width: 70px;
  height: 70px;
  clip-path: polygon(50% 10%, 90% 30%, 90% 80%, 50% 100%, 0% 75%, 0% 35%);
  background: lightgray;
  position: absolute;
}

#elem2_1 {
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: coral;
  position: absolute;
  top: 122px;
  left: 40px;
}

#elem2_2 {
  width: 100px;
  height: 100px;
  clip-path: polygon(40% 2%, 100% 32%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background-image: url(
 "https://i.pinimg.com/736x/c0/22/aa/c022aa08ead397261c4ff17b366ed614.jpg"
  );
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
}

#elem3_1 {
  width: 70px;
  height: 70px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: coral;
  position: absolute;
  top: 85px;
  left: 120px;
}

#elem3_2 {
  width: 70px;
  height: 70px;
  clip-path: polygon(70% 0%, 100% 25%, 100% 75%, 50% 100%, 10% 100%, 10% 30%);
  background: lightgray;
  position: absolute;
}

#elem4_1 {
  width: 70px;
  height: 70px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: coral;
  position: absolute;
  top: 33px;
  left: 155px;
}

#elem4_2 {
  width: 70px;
  height: 70px;
  clip-path: polygon(50% 10%, 90% 30%, 90% 80%, 50% 100%, 10% 100%, 10% 30%);
  background: lightgray;
  position: absolute;
}

#elem5_1 {
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: coral;
  position: absolute;
  top: 64px;
  left: 218px;
}

#elem5_2 {
  width: 100px;
  height: 100px;
  clip-path: polygon(50% 10%, 90% 30%, 90% 70%, 35% 100%, 0% 75%, 0% 35%);
  background: lightgray;
  position: absolute;
}

<div class="container">
  <div id="elem1_1">
    <div id="elem1_2"></div>
  </div>
  <div id="elem2_1">
    <div id="elem2_2"></div>
  </div>
  <div id="elem3_1">
    <div id="elem3_2"></div>
  </div>
  <div id="elem4_1">
    <div id="elem4_2"></div>
  </div>
  <div id="elem5_1">
    <div id="elem5_2"></div>
  </div>
</div>