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

SVG Isometric Box

  1. const el = document.body.appendChild(
  2. document.createElement('div'));
  3.  
  4. el.innerHTML = `
  5.   <svg id="svg" width="100%" height="100%" viewBox="0 0 550 500">
  6.     ${(() => {
  7.       let str = ''
  8.       let c = 10;
  9.       let num = 200;
  10.       let colStep = 225 / num
  11.       for (let i = 0; i < num; i++) {
  12.         c += colStep;
  13.         col = `rgb(${c}, ${c}, ${c})`;
  14.         str += `<rect 
  15.           fill="${col}" 
  16.           x="0" y="0" 
  17.           width="200" height="200" 
  18.           transform="translate(275, ${250 - i}) scale(1, .5) rotate(45)" />`
  19.       }
  20.       return str
  21.     })()}
  22.   </svg>
  23.   <style>
  24.     svg, div, body, html {
  25.       overflow: visible; 
  26.       height: 100%; 
  27.       width: 100%;
  28.       margin: 0; padding: 0;
  29.       background: gray;
  30.     }
  31.   </style>
  32.   `;

Draw a shaded isometric box in SVG.

// dom // javascript // strings // svg
snippet.zone ~ 2021-22 /// {s/z}