Максим

colors.forEach(e=>{
  let img = new Image();
  img.src= e.img;
  img.onload = function(){
      e.isLoaded = true;
      if(colors.every(e1=>e1.isLoaded))        
        repaintPanel();
  }
});

<i class="fa fa-play-circle" aria-hidden="true"></i>

но опасаемся, что Laravel будет работать очень медленно в случае такой посещаемости.

const urls = [...]

let items = document.querySelectorAll(".grid .item");

items.forEach(function (el, id) {
  el.innerHTML = `
<svg viewBox="0 0 155 219"  xmlns="http://www.w3.org/2000/svg">
 <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="black"></rect>
      <circle cx="80" cy="120" r="60" fill="white" stroke="#c00" stroke-width="10" />
      <circle cx="50" cy="60" r="40" fill="white" stroke="#c00" stroke-width="10" />
    </mask>     
 </defs>
  <image href=" ${urls[id]} " width="100%" height="100%" x="0" y="0" 
  preserveAspectRatio="none" mask="url(#mask)"/>
</svg>
  `;
});

{} // литерал объекта
[] // литерал массива
'' // литерал строки
"" // тоже литерал строки
`` // ещё один литерал строки
/./ // литерал регулярного выражения (конкретно для примера - любого символа)

А нельзя ли как-то упростить?

<svg width="200" height="300">
    <mask id="my-mask">
        <g stroke="gray" stroke-width="12" fill="white">
            <circle cx="33%" cy="30%" r="20%" />
            <circle cx="52%" cy="62%" r="32%" />
        </g>
    </mask>
</svg>

<!-- 1 -->
<svg width="200" height="300">
    <image href="https://picsum.photos/id/1/200/300" width="200" height="300" mask="url(#my-mask)"/>
</svg>

<!-- 2 -->
<svg width="200" height="300">
    <image href="https://picsum.photos/id/2/200/300" width="200" height="300" mask="url(#my-mask)"/>
</svg>

<!-- ...100500 -->
<svg width="200" height="300">
    <image href="https://picsum.photos/id/3/200/300" width="200" height="300" mask="url(#my-mask)"/>
</svg>