diff --git a/images/result.png b/images/result.png
index 63abc74..5f35b4a 100755
Binary files a/images/result.png and b/images/result.png differ
diff --git a/index.html b/index.html
index d2cf3de..ff0cb29 100755
--- a/index.html
+++ b/index.html
@@ -3,9 +3,23 @@
 <head>
     <meta charset="utf-8">
     <title>svg2cube</title>
+    <style>
+    .thumbnail {
+        height: 15em;
+    }
+    .center-block
+    {
+        text-align:center;
+        display:block;
+    }
+    #svg2cube {
+        display: inline-block;
+        width: 512px;
+    }
+    </style>
 </head>
 
-<body>
+<body class="center-block">
     <h1>svg2cube - demo</h1>
 
 
@@ -15,16 +29,22 @@
         <p>The buttons allow you to try different parameters. </p>
     </div>
 
-    <img src="inputs/panels.svg" style="height: 15em;"></img>
 
+    <h2>Input</h2>
+    <img src="inputs/panels.svg" class="thumbnail"></img>
+    <h2>Rendered output</h2>
+    <img src="images/result.png"  class="thumbnail" ></img>
 
-    <p id="loading">Loading...</p>
+    <h2>Real time output</h2>
+    <div id="loading"><h2>Loading...<h2></div>
+    <div id="svg2cube"></div>
 
 </body>
 
 
-<script type="text/javascript" src="/cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
-<script type="text/javascript" src="/cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+
 
 <script src="svg2cube-frontend.js"></script>
 
@@ -47,7 +67,7 @@
                 "stroke": 'black', // stroke color for outline
                 "stroke-width": 0, // outline width
             },
-            size: 256,
+            size: 128,
         });
 
         var gui = new dat.GUI();
diff --git a/readme.md b/readme.md
index 0979bdb..43499a8 100755
--- a/readme.md
+++ b/readme.md
@@ -1,9 +1,15 @@
 svg2cube
 
-Generate isometric game sprites. Inputs an svg panel and it's folded into a cube and rendered from any angle.
+Generate isometric game sprites. Inputs an svg panel and it's folded into a cube and rendered from any angle. [Example hosted here](https://wassname.github.io/svg2cube/).
 
 # Quickstart
-TODO
+
+```bash
+git clone git@github.com:wassname/svg2cube.git
+cd svg2cube
+npm i
+node svg2cube-cli.js inputs/panels.svg
+```
 
 # Screenshots
 ## Input:
@@ -22,7 +28,7 @@ TODO
 First try it using the supplied panel. From the command line:
 
 ```sh
-npm svg2cube-cli.js inputs/panels.svg
+node svg2cube-cli.js inputs/panels.svg
 ```
 
 Or in node:
diff --git a/svg2cube-frontend.js b/svg2cube-frontend.js
index e0e48a6..9af5be6 100755
--- a/svg2cube-frontend.js
+++ b/svg2cube-frontend.js
@@ -156,7 +156,10 @@
                 '</b>');
             cube.append(imageBottom);
 
-            $('body').append(cube);
+            var target=$('#svg2cube');
+            if (!target){target=$('body');}
+
+            target.append(cube);
 
         }
         // Now we generate some css to put everything in good positions
@@ -165,14 +168,14 @@
             '<style id="projection">     ' +
             '                .cube {    ' +
             '                    height: ' + this.ch + 'px;    ' +
-            '                    width: ' + this.cw + 'px;    ' +
+            '                    width: ' + this.cw*2 + 'px;    ' +
             '                }    ' +
             '                 .face {    ' +
             '                  height: ' + o.size + 'px;    ' +
             '                  width: ' + o.size + 'px;    ' +
             '                }    ' +
             '                .cube {    ' +
-            '                    position: absolute;    ' +
+            '                    position: relative;    ' +
             '                    -webkit-transform: translate(' + this.cw / 2 + 'px,' + 0 * this.ch / 2 + 'px) perspective(-' + o.perspective + 'px) rotateX(-' + o.rotateX + 'deg) rotateY(' + o.rotateY + 'deg) rotateZ(' + o.rotateZ + 'deg)   scaleX(' + o.scaleX + ')  scaleY(' + o.scaleY + ')  scaleZ(' + o.scaleZ + ');    ' +
             '                    -webkit-transform-style: preserve-3d;    ' +
             '                    -webkit-transition: ' + transitions + 's;    ' +
@@ -297,6 +300,5 @@
 
     exports.SvgCube.prototype.update = function () {
         this.init();
-        console.log(this.getBounds());
     };
 })(typeof exports === 'undefined' ? this['SvgCube'] = {} : exports);
diff --git a/svg2cube.js b/svg2cube.js
index cff8c92..3272e58 100755
--- a/svg2cube.js
+++ b/svg2cube.js
@@ -10,7 +10,7 @@ var gm = require('gm');
 var chromedriver = require('chromedriver');
 var childProcess = require('child_process');
 
-var SvgCube = require('./svgcube.js');
+var SvgCube = require('./svg2cube.js');
 
 
 var debug = process.env.DEBUG || false;
