const el = document.body.appendChild(

document.createElement('div'));

el.innerHTML = `

  <svg id="svg" width="100%" height="100%" viewBox="0 0 550 500">

    ${(() => {

      let str = ''

      let c = 10;

      let num = 200;

      let colStep = 225 / num

      for (let i = 0; i < num; i++) {

        c += colStep;

        col = `rgb(${c}, ${c}, ${c})`;

        str += `<rect 

          fill="${col}" 

          x="0" y="0" 

          width="200" height="200" 

          transform="translate(275, ${250 - i}) scale(1, .5) rotate(45)" />`

      }

      return str

    })()}

  </svg>

  <style>

    svg, div, body, html {

      overflow: visible; 

      height: 100%; 

      width: 100%;

      margin: 0; padding: 0;

      background: gray;

    }

  </style>

  `;