regexper-static/src/index.html

<div class="container">
  <form id="regexp-form">
    <textarea id="regexp-input" autofocus="autofocus" placeholder="Enter JavaScript-style regular expression to display"></textarea>
    <button type="submit">Display</button>

    <ul class="inline-list">
      <li><a href="#" class="oi with-text" data-glyph="data-transfer-download" download="image.svg" type="image/svg+xml">Download</a></li>
      <li><a href="#" class="oi with-text" data-glyph="link-intact">Permalink</a></li>
    </ul>
  </form>
</div>

<div class="results">
  <div id="loading">
    <div class="spinner">
      <div></div>
      <div></div>
    </div>
  </div>

  <div id="error"></div>

  <div id="regexp-render">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <style type="text/css">
        text {
          font: 12px Arial;
          dominant-baseline: text-after-edge;
        }

        path {
          fill: transparent;
          stroke-width: 2px;
          stroke: #000;
        }

        circle.pin {
          fill: #6b6659;
          stroke-width: 2px;
          stroke: #000;
        }

        .anchor text, .any-character text {
          fill: #fff;
        }

        .anchor rect, .any-character rect {
          fill: #6b6659;
        }

        .escape text, .literal text {
          fill: #000;
        }

        .escape rect {
          fill: #bada55;
        }

        .literal rect {
          fill: #dae9e5;
        }

        .charset .charset-box {
          fill: #cbcbba;
        }

        .placeholder text {
          fill: #fff;
          font-weight: bold;
        }

        .placeholder rect {
          fill: #f00;
        }

        path.bounding-box {
          fill: transparent;
          stroke: #000;
          stroke-dasharray: 5,2;
        }
      </style>
    </svg>
  </div>
</div>