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 id="progress">
      <div style="width: 0%;"></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, tspan {
          font: 12px Arial;
        }

        path {
          fill-opacity: 0;
          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, .charset-escape text, .literal text {
          fill: #000;
        }

        .escape rect, .charset-escape rect {
          fill: #bada55;
        }

        .literal rect {
          fill: #dae9e5;
        }

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

        .subexp .subexp-label,
        .charset .charset-label,
        .match-fragment .repeat-label {
          font-size: 10px;
        }

        .subexp .subexp-label,
        .charset .charset-label {
          dominant-baseline: text-after-edge;
        }

        .subexp .subexp-box {
          stroke: #a0a0a0;
          stroke-dasharray: 6,2;
          stroke-width: 2px;
          fill-opacity: 0;
        }

        .quote {
          fill: #a0a0a0;
        }

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

        .placeholder rect {
          fill: #f00;
        }
      </style>
    </svg>
  </div>
</div>