Vue

HTML

<div id="app">
  <svg v-for="img in imgs" width="114" height="131" viewBox="0 0 114 131" fill="none" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M56.9886 0.986084L113.153 33.4125V98.2654L56.9886 130.692L0.824379 98.2654V33.4125L56.9886 0.986084Z"
      fill="#0D1126" />
    <path d="M56.9886 0.986084L113.153 33.4125V98.2654L56.9886 130.692L0.824379 98.2654V33.4125L56.9886 0.986084Z"
      :fill="'url(#pattern' + img.id + ')'" />
    <defs>
      <pattern :id="'pattern' + img.id" patternContentUnits="objectBoundingBox" width="1" height="1">
        <image width="200" height="200" :xlink:href="img.href" transform="scale(0.005)" />
      </pattern>
    </defs>
  </svg>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: "#app",
  data: {
    imgs: [
      { id: 0, href: "https://habrastorage.org/r/w60/webt/5e/b8/8a/5eb88a755eca4980975288.jpeg" },
      { id: 1, href: "https://habrastorage.org/r/w60/webt/5c/47/36/5c473605e4efc297611151.png" },
      { id: 2, href: "https://habrastorage.org/r/w60/webt/5a/0d/13/5a0d13bdf0dc1686392266.jpeg" },
      { id: 3, href: "https://habrastorage.org/r/w60/files/115/403/52d/11540352d8024a928dc33b3d9e0db91b.jpg" }
    ]
  }
})