// from https://snippet.zone

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>
`;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.