Adds rule of thirds and golden ratio guides to page innerHTML

layoutguides.js

var guidesRawHTML = `<style>
@media all and (orientation:portrait) {
  .goldenratio {
    transform: rotate(90deg);
    transform-origin: 38% 60%;
    width: calc(100vh + .5rem);
  }
}
.layoutguide {
  position: fixed;
  top: 0;
  left: 0;
}
</style>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" stroke="#F00" preserveAspectRatio="none" height="100%" width="100%" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" class="layoutguide ruleofthirds"><defs><g id="a"><path vector-effect="non-scaling-stroke" d="M0 100h300M0 200h300"></path></g><g id="b"><path vector-effect="non-scaling-stroke" d="M100 0v300M200 0v300"></path></g></defs><use xlink:href="#a" stroke-width="2"></use><use xlink:href="#b" stroke-width="2"></use></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#00F" viewBox="0 0 915 579" class="layoutguide goldenratio"><g stroke-width="1"><path d="M640 403h16v16h-16zM640 419h16v16h-16zM656 403h32v32h-32zM640 355h48v48h-48zM560 355h80v80h-80z"></path><path d="M560 434h128v128H560zM688 355h208v208H688zM560 19h336v336H560zM16 19h544v544H16z"></path></g><g stroke-width="2"><path d="M656 434.3a16 16 0 0 1-16-16M688 402.3a32 32 0 0 1-32 32M640 354.3a48 48 0 0 1 48 48M560 434.3a80 80 0 0 1 80-80M688 562.3a128 128 0 0 1-128-128M896 354.3a208 208 0 0 1-208 208M16 563A544 544 0 0 1 560 19M560 19a336 336 0 0 1 336 336"></path></g></svg>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" stroke="#000" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" class="layoutguide rabatment" width="100%" height="100%" viewBox="0 0 300 200"><rect fill="none" stroke-width="1" x="0" y="0" width="200" height="200"></rect></svg><svg class="layoutguide diagonalmethod" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="none" viewBox="0 0 894.5 600" width="100%"><g color="#000" fill-opacity=".6"><path d="M0 0v600h600V0H0zm18.4 10h563.8l-282 283.7L18.4 10zM590 10zM10 15.8l283 285L10 585.6v-570zm580 .5v569.2L307.2 300.8 590 16.3zM300.2 308l280 282H20l280.4-282z" fill="#fc0" overflow="visible"></path><path d="M294.5 0v600h600V0h-600zm10 10h.7l-.7.7V10zm7 0h565.7l-282 282.8L311.6 10zm573 6.8v564.4L602.3 299.8l282.2-283zm-580 .3L588.2 300 304.5 584.2v-567zm290.7 290l284 283H313L595 307z" fill="#ff0" overflow="visible"></path></g></svg>`;
document.getElementsByTagName("body")[0].innerHTML += guidesRawHTML;