contour
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository
index.html
text/html

Download raw (1.7 KB)

<html>
  <head>
    <style>
      input { border: 1px solid; }
      /* img { transform: rotate(90deg);} */
      .controls {
        z-index: 1;
        position: fixed;
        top: 10px;
        left: 10px;
      }

      img {
        transform: rotate(-90deg);
        transform-origin: top left;
        width: 90vh;
        height: 90vw;
        position: absolute;
        top: 95vh;
        left: 5vw;
        object-fit: contain;
        align-content: middle center;
      }

      body {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <img src="http://localhost:5556/svg/30/30/10/0">
    <section class="controls">
      w <input type="range" name="width" min="10" default="20" max="500">
      h <input type="range" name="height" min="10" default="20" max="500"><br />
      s <input type="range" name="spacing" min="0" default="20" max="500">
      sv <input type="range" name="spacingvertical" min="0" default="20" max="500">
    </section>
    <script>
      var lw, lh, ls;

      function updateSVG() {
        var img = document.querySelector('img'),
            w = document.querySelector('[name="width"]').value,
            h = document.querySelector('[name="height"]').value,
            s = document.querySelector('[name="spacing"]').value,
            sv = document.querySelector('[name="spacingvertical"]').value;
        

        if (w !== lw || h !== lh || s !== ls || sv !== lsv) {
          lw = w;
          ls = s;
          lh = h;
          lsv = sv;
          img.src="http://localhost:5556/svg/" + w + "/" + h + "/" + s + "/" + sv + "?" + Math.random();
        }

        window.requestAnimationFrame(updateSVG);
      }

      updateSVG();
    </script>
  </body>
</html>