diff --git a/app.py b/app.py
index 3c30a89c8bf6936b6df8b8cdc15445ea9867ebf8..9d34b60b5b247bc6c96a93e2c78fe807389f7938 100644
--- a/app.py
+++ b/app.py
@@ -212,17 +212,17 @@ def writing(id):
         figfont_file.write(ascii_input)
 
     print('--- opening the figfont ---')
-    f = {}
-    f['ascii'] = text2figlet(params['text'], figfont_path)
-    print(f['ascii'])
+    ascii = text2figlet(params['text'], figfont_path)
+    print(ascii)
 
     print('--- rendering to svg ---')
-    svg = ascii2svg(f['ascii'], params['weight'])
+    svg = ascii2svg(ascii, params['weight'])
 
     return render_template(
-        'drawing.html',
+        'writing.html',
         title = title,
         params = params,
+        ascii = ascii,
         svg = svg)
 
 #            _        _                        
diff --git a/static/css/interface.css b/static/css/interface.css
index 8e2bbfa0f18c0ab749b546d109fbbe85b871df9a..72a86b2e32806b2cb9c03e5de51965805450d92b 100644
--- a/static/css/interface.css
+++ b/static/css/interface.css
@@ -211,6 +211,10 @@ aside.left{
     grid-column: 2 / span 1;
     grid-row: 2 / span 1;
 }
+.f-double{
+    width: 100%;
+    height: 100%;
+}
 hr{
     border: 0;
     border-top: 1px solid black;
diff --git a/templates/font.html b/templates/font.html
index bdc66381dd6cf12681cdb22f718255ef4b958e79..540ce82baf588430939d29c5ace1186ddf10121b 100644
--- a/templates/font.html
+++ b/templates/font.html
@@ -93,10 +93,8 @@
   <div class="font">
     <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
     </iframe>
-    <div class="f-svg">
-        <iframe id="svg-iframe" src="/writing/{{params['pad']}}">
-        </iframe>
-    </div>
+    <iframe class="f-double" id="svg-iframe" src="/writing/{{params['pad']}}">
+    </iframe>
   </div>
 
 {% endblock %}
diff --git a/templates/writing.html b/templates/writing.html
new file mode 100644
index 0000000000000000000000000000000000000000..bd602ed704b49c1b2cf17ba96d86897a500f411e
--- /dev/null
+++ b/templates/writing.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="/static/js/FileSaver.js"></script>
+    <style>
+      #save-svg{
+        position: fixed;
+        top: 0.5em;
+        right: 0.5em;
+      }
+      .svgbob text {
+        font-family: monospace !important;
+        font-weight: bold !important;
+        fill: red !important;
+      }
+      .svgbob text{
+        visibility: hidden;
+      }
+      body.check-text .svgbob text{
+          visibility: visible;
+      }
+      .double-font{
+        height: 100vh;
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+        gap: 1rem;
+        margin: 0;
+      }
+      .double-font div{
+        background-color: white;
+        border: 1px solid black;
+        overflow: auto;
+        padding: 1rem;
+        font-family: monospace;
+        font-size: 1rem;
+      }
+      .f-ascii{
+        font-family: monospace;
+        font-size: 1rem;
+
+      }
+    </style>
+  </head>
+
+  <body class="double-font">
+
+    <div class="f-svg">
+      {{ svg|safe }}
+    </div>
+
+    <div class="f-ascii"><pre>{{ ascii|safe }}</pre></div>
+
+    <button id="save-svg">> SVG</button>
+
+    <script>
+      function get2bodyclass(){
+        const url = new URL(window.location.href);
+        let checked = url.searchParams.get("c");
+        if(checked == "false"){
+          document.body.classList.remove("check-text");
+        }
+        else{
+          document.body.classList.add("check-text");
+        }
+      }
+      get2bodyclass();
+    </script>
+
+    <script>
+      let save_button = document.getElementById('save-svg');
+
+      save_button.addEventListener('click', function(){
+        //get svg element.
+        let svg = document.getElementsByTagName("svg")[0];
+
+        //get svg source.
+        let serializer = new XMLSerializer();
+        let source = serializer.serializeToString(svg);
+
+        let blob = new Blob([source], {type: "text/plain;charset=utf-8"});
+        saveAs(blob, 'cobbled-paths.svg');
+      });
+    </script>
+
+  </body>
+</html>
\ No newline at end of file