)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Rectangle Path with SVG

  1. const rectPath = rect =>
  2.   `M ${rect.left} ${rect.top}
  3.   L ${rect.right} ${rect.top}
  4.     ${rect.right} ${rect.bottom}
  5.     ${rect.left} ${rect.bottom}
  6.     ${rect.left} ${rect.top} `;
  7.  
  8. const el = document.body.appendChild(
  9.   document.createElement('div'));
  10.  
  11. el.innerHTML = `
  12.   <svg width="100%" height="100%" viewBox="0 0 550 496">
  13.     <path d="
  14.     ${rectPath({left: 20, top: 10, right: 100, bottom: 100})}
  15.     ${rectPath({left: 50, top: 50, right: 200, bottom: 200})}
  16.     ${rectPath({left: 150, top: 20, right: 250, bottom: 100})}
  17.     ${rectPath({left: 150, top: 120, right: 250, bottom: 230})}
  18.     " stroke="black" fill="red" fill-rule="evenodd" vector-effect="non-scaling-stroke"/>
  19.  
  20.     <path d="
  21.     ${rectPath({left: 10, top: 220, right: 100, bottom: 300})}
  22.     ${rectPath({left: 20, top: 250, right: 150, bottom: 350})}
  23.     " stroke="white" fill="#64a7ff" fill-rule="nonzero" vector-effect="non-scaling-stroke"/>
  24.  
  25.     <path d="
  26.     ${rectPath({left: 350, top: 10, right: 450, bottom: 150})}
  27.     " fill="#2e9997" />
  28.   </svg>
  29.   <style>
  30.     svg, div, body, html {
  31.       overflow: visible; 
  32.       height: 100%; 
  33.       width: 100%;
  34.       margin: 0; padding: 0;
  35.     }
  36.   </style>
  37. `;

In this snippet rectPath creates a rectangle with “move to” and “line to” commands to be used in conjunction with SVG paths.

// javascript // paths // svg
snippet.zone ~ 2021-24 /// {s/z}