const rectPath = rect =>

  `M ${rect.left} ${rect.top}

  L ${rect.right} ${rect.top}

    ${rect.right} ${rect.bottom}

    ${rect.left} ${rect.bottom}

    ${rect.left} ${rect.top} `;

const el = document.body.appendChild(

  document.createElement('div'));

el.innerHTML = `

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

    <path d="

    ${rectPath({left: 20, top: 10, right: 100, bottom: 100})}

    ${rectPath({left: 50, top: 50, right: 200, bottom: 200})}

    ${rectPath({left: 150, top: 20, right: 250, bottom: 100})}

    ${rectPath({left: 150, top: 120, right: 250, bottom: 230})}

    " stroke="black" fill="red" fill-rule="evenodd" vector-effect="non-scaling-stroke"/>

    <path d="

    ${rectPath({left: 10, top: 220, right: 100, bottom: 300})}

    ${rectPath({left: 20, top: 250, right: 150, bottom: 350})}

    " stroke="white" fill="#64a7ff" fill-rule="nonzero" vector-effect="non-scaling-stroke"/>

    <path d="

    ${rectPath({left: 350, top: 10, right: 450, bottom: 150})}

    " fill="#2e9997" />

  </svg>

  <style>

    svg, div, body, html {

      overflow: visible; 

      height: 100%; 

      width: 100%;

      margin: 0; padding: 0;

    }

  </style>

`;