Jfactory Presents

HTML
Music notation

🤔?

These are notes for the creation of this webpage joshuahouston.me

Define SVG elements in invisible container

<svg viewBox="0 0 0 0" style="height:0px;width:0px;display:none;">
    <g id="music-portrait">
    … </g>
    <g id="music-widescreen">
    … </g>
</svg>

Render Pre-defined SVG

<svg>
  <use xlink:href="#music-portrait">
</svg>

Display portion of music using viewBox

<svg id="main-riff" viewBox="0 0 2160 1120">…</svg>
<svg id="bridge-section" viewBox="0 1120 2160 2120">…</svg>

Use Bootstrap Breakpoint Classes

<div class="d-lg-none d-xl-none">
  <svg id="bridge-portrait"></svg>
</div>
<div class="d-none d-lg-block d-xl-block">
  <svg id="bridge-widescreen"></svg>
</div>