diff --git a/app.py b/app.py
index dce53a129e213258192647b6191fe4346b861e1f..342a7b90a150c1326e0f5bff02b1c229014e7f5a 100644
--- a/app.py
+++ b/app.py
@@ -6,7 +6,7 @@ import sys
 import tempfile
 import io
 import requests
-from svg_to_hpgl import svgToHPGL
+# from svg_to_hpgl import svgToHPGL
 
 app = Flask(__name__)
 
@@ -20,21 +20,20 @@ prefix = 'cobbled-pad-'
 # VARIABLES 4 CATALOGUE
 # ------------------------------
 
-output = {
+collection = {
     'stroke':  { 'ascii': ' | ' , 'fonts': [] },
     'script':  { 'ascii': ' _/' , 'fonts': [] },
     'block':   { 'ascii': '|_|' , 'fonts': [] },
     'outline': { 'ascii': '/ /' , 'fonts': [] },
     'effect':  { 'ascii': ': :' , 'fonts': [] },
-    'pattern': { 'ascii': ')()' , 'fonts': [] },
+    'pattern': { 'ascii': '(((' , 'fonts': [] },
 
-    # 'fill': { 'ascii': '_/', 'fonts': {} },
+    'fill':    { 'ascii': '###'  , 'fonts': [] },
+    '3d':      { 'ascii': '_|/'  , 'fonts': [] },
 
-    # 'directions': { 'ascii': '_/', 'fonts': {} },
-    # '3d': { 'ascii': '_/', 'fonts': {} },
-
-    # 'frame': { 'ascii': '_/', 'fonts': {} },
-    # 'code': { 'ascii': '_/', 'fonts': {} },
+    # 'directions': { 'ascii': '_/', 'fonts': [] },
+    # 'frame': { 'ascii': '_/', 'fonts': [] },
+    # 'code': { 'ascii': '_/', 'fonts': [] },
 }
 databases = {
     'default': 'fonts made by the figlet developpers and given with the program, early 1993',
@@ -128,6 +127,33 @@ def make_figfont(ascii):
         figfont_file.write(ascii)
     return figfont_path
 
+def parse_collection():
+    # walk in the figlet font directory
+    for root, dirs, files in os.walk(fonts_directory):
+        for name in files:
+
+            (basename, ext) = os.path.splitext(name)
+            if  ext in possible_extensions:
+
+                figfont = os.path.join(root, name)
+                print(figfont)
+
+                # get font databases out of first folder
+                database = root.split('/')[-2]
+                # get font type out of last folder 
+                type = root.split('/')[-1]
+
+                # only include selected types
+                if type in collection:
+                
+                    f = {}
+                    f['name'] = name
+                    f['database'] = database
+                    f['figfont'] = figfont
+
+                    # sort them by type
+                    collection[type]['fonts'].append(f)
+
 
 # ROUTES
 # ------------------------------
@@ -161,7 +187,7 @@ def index():
 def draw():
 
     params = {
-        'pad': request.args.get('p') or 'default',
+        'pad': request.args.get('p') or 'index',
         'weight': request.args.get('w') or '3',
     }
     params['pad-full'] = etherpad + prefix + params['pad']
@@ -209,7 +235,7 @@ def font():
 
     params = {
         'text': request.args.get('t') or 'the quick brown fox jumps over the lazy dog',
-        'pad': request.args.get('p') or 'standard',
+        'pad': request.args.get('p') or 'font_index',
         'weight': request.args.get('w') or '3',
     }
     params['pad-full'] = etherpad + prefix + params['pad']
@@ -224,28 +250,38 @@ def writing(id):
 
     params = {
         'text': request.args.get('t') or 'the quick brown fox jumps over the lazy dog',
-        'pad': id or 'standard',
+        'pad': id or 'ascriipt',
         'weight': request.args.get('w') or '3',
     }
-    params['pad-full'] = etherpad + prefix + params['pad']
-
-    pad_answer = get_pad(params['pad-full'])
 
-    # TODO: only create new file if content of pad changed
-    # store as a temporary file
-
-    if pad_answer[0]:
-        ascii = pad_answer[1]
-        figfont = make_figfont(ascii)
+    if '.flf' in params['pad']:
+        # it's not a pad it's a local figfont file
+        figfont = '/'.join(params['pad'].split('_'))
         figlet_answer = text2figlet(params['text'], figfont)
+
         if figlet_answer[0]:
             ascii = figlet_answer[1]
             svg = ascii2svg(figlet_answer[1], params['weight'])
         else:
             ascii = svg = figlet_answer[1]
-        
+
     else:
-        ascii = svg = pad_answer[1]
+        # we compile a figfont from a pad
+        params['pad-full'] = etherpad + prefix + params['pad']
+        pad_answer = get_pad(params['pad-full'])
+
+        if pad_answer[0]:
+            ascii = pad_answer[1]
+            figfont = make_figfont(ascii)
+
+            figlet_answer = text2figlet(params['text'], figfont)
+            if figlet_answer[0]:
+                ascii = figlet_answer[1]
+                svg = ascii2svg(figlet_answer[1], params['weight'])
+            else:
+                ascii = svg = figlet_answer[1]
+        else:
+            ascii = svg = pad_answer[1]
 
     return render_template(
         'writing.html',
@@ -263,52 +299,21 @@ def writing(id):
 # 
 # FIGLET 2 SVGBOB INTERACTIVE CATALOGUE
 
-# @app.route("/catalogue.html")
-# def catalogue():
+@app.route("/catalogue.html")
+def catalogue():
     
-#     # text and weight as get parameter
-#     params = {
-#         'text': request.args.get('t') or 'Echoes',
-#         'weight': request.args.get('w') or '3',
-#     }
-
-#     # walk in the figlet font directory
-#     for root, dirs, files in os.walk(fonts_directory):
-#         for name in files:
-
-#             (basename, ext) = os.path.splitext(name)
-#             if  ext in possible_extensions:
-
-#                 figfont = os.path.join(root, name)
-#                 print(figfont)
-
-#                 # get font category out of last folder
-#                 catalogue = root.split('/')[-2]
-#                 type = root.split('/')[-1]
-#                 if type in output:
-                
-#                     f = {}
-#                     output[type]['fonts'].append(f)
-#                     f['name'] = name
-#                     f['catalogue'] = catalogue
-#                     f['ascii'] = text2figlet(params['text'], figfont)
-#                     f['svg'] = ascii2svg(f['ascii'], params['weight'])
-                    
-#                     # regex auto_fix
-#                     f['ascii_fix'] = ascii_autofix(f['ascii'])
-
-#                     if f['ascii'] != f['ascii_fix']:
-#                         f['autofix'] = True
-#                         f['ascii_fix_indication'] = autofix_indication(f['ascii_fix'])
-#                         f['svg_fix'] = ascii2svg(f['ascii_fix'], params['weight'])
-
-#     return render_template(
-#         'catalogue.html',
-#         title = title,
-#         databases = databases,
-#         output = output,
-#         params = params)
+    # text and weight as get parameter
+    params = {
+        'text': request.args.get('t') or 'the quick brown fox jumps over the lazy dog',
+        'weight': request.args.get('w') or '3',
+    }
 
+    return render_template(
+        'catalogue.html',
+        title = title,
+        databases = databases,
+        collection = collection,
+        params = params)
 
 #  _                 _                              _   
 # | |__  _ __   __ _| |   _____  ___ __   ___  _ __| |_ 
@@ -371,4 +376,5 @@ def hpgl (id):
     return r
 
 if __name__ == '__main__':
-	app.run(debug=True, host='0.0.0.0')
\ No newline at end of file
+    parse_collection()
+    app.run(debug=True, host='0.0.0.0')
\ No newline at end of file
diff --git a/iceberg/42.svg b/iceberg/42.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7a9eecaa00d2f517c14e119902c20c7449e8f190
--- /dev/null
+++ b/iceberg/42.svg
@@ -0,0 +1,207 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="504"
+   height="432"
+   class="svgbob"
+   version="1.1"
+   id="svg231"
+   sodipodi:docname="42.svg"
+   inkscape:version="1.3.1 (9b9bdc1480, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview231"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.58925565"
+     inkscape:cx="32.244069"
+     inkscape:cy="336.01714"
+     inkscape:window-width="1854"
+     inkscape:window-height="968"
+     inkscape:window-x="0"
+     inkscape:window-y="34"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg231" />
+  <style
+     id="style1">.svgbob line, .svgbob path, .svgbob circle, .svgbob rect, .svgbob polygon {
+  stroke: black;
+  stroke-width: 2;
+  stroke-opacity: 1;
+  fill-opacity: 1;
+  stroke-linecap: round;
+  stroke-linejoin: miter;
+}
+
+.svgbob text {
+  white-space: pre;
+  fill: black;
+  font-family: Iosevka Fixed, monospace;
+  font-size: 14px;
+}
+
+.svgbob rect.backdrop {
+  stroke: none;
+  fill: white;
+}
+
+.svgbob .broken {
+  stroke-dasharray: 8;
+}
+
+.svgbob .filled {
+  fill: black;
+}
+
+.svgbob .bg_filled {
+  fill: white;
+  stroke-width: 1;
+}
+
+.svgbob .nofill {
+  fill: white;
+}
+
+.svgbob .end_marked_arrow {
+  marker-end: url(#arrow);
+}
+
+.svgbob .start_marked_arrow {
+  marker-start: url(#arrow);
+}
+
+.svgbob .end_marked_diamond {
+  marker-end: url(#diamond);
+}
+
+.svgbob .start_marked_diamond {
+  marker-start: url(#diamond);
+}
+
+.svgbob .end_marked_circle {
+  marker-end: url(#circle);
+}
+
+.svgbob .start_marked_circle {
+  marker-start: url(#circle);
+}
+
+.svgbob .end_marked_open_circle {
+  marker-end: url(#open_circle);
+}
+
+.svgbob .start_marked_open_circle {
+  marker-start: url(#open_circle);
+}
+
+.svgbob .end_marked_big_open_circle {
+  marker-end: url(#big_open_circle);
+}
+
+.svgbob .start_marked_big_open_circle {
+  marker-start: url(#big_open_circle);
+}
+
+</style>
+  <defs
+     id="defs4">
+    <marker
+       id="arrow"
+       viewBox="-2 -2 8 8"
+       refX="4"
+       refY="2"
+       markerWidth="7"
+       markerHeight="7"
+       orient="auto-start-reverse"
+       preserveAspectRatio="xMidYMid">
+      <polygon
+         points="0,0 0,4 4,2 0,0"
+         id="polygon1" />
+    </marker>
+    <marker
+       id="diamond"
+       viewBox="-2 -2 8 8"
+       refX="4"
+       refY="2"
+       markerWidth="7"
+       markerHeight="7"
+       orient="auto-start-reverse">
+      <polygon
+         points="0,2 2,0 4,2 2,4 0,2"
+         id="polygon2" />
+    </marker>
+    <marker
+       id="circle"
+       viewBox="0 0 8 8"
+       refX="4"
+       refY="4"
+       markerWidth="3"
+       markerHeight="3"
+       orient="auto-start-reverse"
+       preserveAspectRatio="xMidYMid">
+      <circle
+         cx="4"
+         cy="4"
+         r="2"
+         class="filled"
+         id="circle2" />
+    </marker>
+    <marker
+       id="open_circle"
+       viewBox="0 0 8 8"
+       refX="4"
+       refY="4"
+       markerWidth="0.001"
+       markerHeight="0.001"
+       orient="auto-start-reverse"
+       preserveAspectRatio="xMidYMid">
+      <circle
+         cx="4"
+         cy="4"
+         r="2"
+         class="bg_filled"
+         id="circle3" />
+    </marker>
+    <marker
+       id="big_open_circle"
+       viewBox="0 0 8 8"
+       refX="4"
+       refY="4"
+       markerWidth="1"
+       markerHeight="1"
+       orient="auto-start-reverse"
+       preserveAspectRatio="xMidYMid"
+       markerUnits="strokeWidth">
+      <circle
+         cx="-4"
+         cy="4"
+         r="3"
+         class="bg_filled"
+         id="circle4"
+         transform="scale(-1,1)" />
+    </marker>
+  </defs>
+  <g
+     id="g232"
+     style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     transform="translate(49.274397,38.772256)">
+    <path
+       id="line147"
+       style="stroke-width:15;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none"
+       d="M 340,176 C 340,176 340.61267,181.40467 340,184 C 337.94503,192.705 328,199.05573 328,208 C 328,213.96285 333.33333,218.66667 336,224 M 340,160 C 340,160 340.61267,165.40467 340,168 C 337.94503,176.705 335.60845,187.29772 328,192 C 324.5974,194.10292 318.82843,194.82843 316,192 C 312.22876,188.22876 316,176 316,176 M 200,176 C 202.66667,181.33333 202.03715,192 208,192 C 213.96285,192 213.33333,181.33333 216,176 M 224,176 C 226.66667,181.33333 226.9277,188.86515 232,192 C 238.80521,196.20585 249.19479,196.20585 256,192 C 266.1446,185.73029 261.8554,166.26971 272,160 C 277.67101,156.49513 287.28595,155.28595 292,160 C 299.54247,167.54247 284.45753,184.45753 292,192 C 294.82843,194.82843 300.5974,194.10292 304,192 C 311.60845,187.29772 313.94503,176.705 316,168 C 316.61267,165.40467 316,160 316,160 M 172,176 C 172,176 168.22876,188.22876 172,192 C 174.82843,194.82843 180.5974,194.10292 184,192 C 196.68075,184.16286 189.09288,152 204,152 C 212.94427,152 208.39155,171.29772 216,176 C 218.2684,177.40195 221.7316,177.40195 224,176 C 229.0723,172.86515 226.9277,163.13485 232,160 C 236.5368,157.1961 248,160 248,160 M 124,176 C 124,176 120.22876,188.22876 124,192 C 126.82843,194.82843 132.5974,194.10292 136,192 C 146.1446,185.73029 141.8554,166.26971 152,160 C 157.67101,156.49513 167.28595,155.28595 172,160 C 173.88562,161.88562 172.61267,165.40467 172,168 C 169.94503,176.705 167.60845,187.29772 160,192 C 157.7316,193.40195 154.2684,193.40195 152,192 C 146.9277,188.86515 146.66667,181.33333 144,176 M 92,192 C 92,192 106.32899,195.50487 112,192 C 119.60845,187.29772 121.94503,176.705 124,168 C 125.83802,160.21401 124,144 124,144 M 112,160 H 136 M 48,176 C 50.666667,170.66667 50.927699,163.13485 56,160 C 59.402603,157.89708 65.171573,157.17157 68,160 C 75.542472,167.54247 60.457528,184.45753 68,192 C 70.828427,194.82843 76.597397,194.10292 80,192 C 87.608452,187.29772 89.945027,176.705 92,168 C 92.612674,165.40467 90.114382,161.88562 92,160 C 94.828427,157.17157 101.89708,156.5974 104,160 C 107.13485,165.0723 98.666667,170.66667 96,176 M 44,176 C 44,176 47.771236,163.77124 44,160 C 41.171573,157.17157 35.402603,157.89708 32,160 C 26.927699,163.13485 26.666667,170.66667 24,176 M 0,176 C 2.6666667,170.66667 2.9276986,163.13485 8,160 C 11.402603,157.89708 17.171573,157.17157 20,160 C 23.771236,163.77124 20,176 20,176 M 340,224 C 340,224 332.45753,199.54247 340,192 C 344.71405,187.28595 354.32899,195.50487 360,192 C 365.0723,188.86515 362.9277,179.13485 368,176 C 371.4026,173.89708 380,176 380,176 M 380,144 C 380,144 368.68629,180.68629 380,192 C 382.82843,194.82843 388.5974,194.10292 392,192 C 397.0723,188.86515 397.33333,181.33333 400,176 M 344,176 C 346.66667,170.66667 346.9277,163.13485 352,160 C 354.2684,158.59805 357.7316,158.59805 360,160 C 365.0723,163.13485 365.33333,170.66667 368,176 M 368,160 H 392"
+       sodipodi:nodetypes="caaccaaaccaccaaaaaaaccaaaaaaccaaaaaaaccaaccccaaaaaaaccaaccaaccaaaccaaccaaccc" />
+  </g>
+  <circle
+     style="fill:#010101;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0.739727;stroke-opacity:1"
+     id="path239"
+     cx="361.164"
+     cy="181.78899"
+     r="9" />
+</svg>
diff --git "a/iceberg/Capture d\342\200\231\303\251cran de 2024-02-20 01-05-06.png" "b/iceberg/Capture d\342\200\231\303\251cran de 2024-02-20 01-05-06.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c8c9f1953c130908367b15fcc91f4776314f7d37
Binary files /dev/null and "b/iceberg/Capture d\342\200\231\303\251cran de 2024-02-20 01-05-06.png" differ
diff --git "a/iceberg/Capture d\342\200\231\303\251cran de 2024-02-24 15-42-20.png" "b/iceberg/Capture d\342\200\231\303\251cran de 2024-02-24 15-42-20.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b13faa84e6e23ebdfb97978d2a6428f96bced858
Binary files /dev/null and "b/iceberg/Capture d\342\200\231\303\251cran de 2024-02-24 15-42-20.png" differ
diff --git a/iceberg/Screenshot 2024-03-30 at 16-34-12 Cobbled paths.png b/iceberg/Screenshot 2024-03-30 at 16-34-12 Cobbled paths.png
new file mode 100644
index 0000000000000000000000000000000000000000..483019ae22d54beada0ba46b153a5ccb0d7f7bd3
Binary files /dev/null and b/iceberg/Screenshot 2024-03-30 at 16-34-12 Cobbled paths.png differ
diff --git a/iceberg/Screenshot 2024-03-30 at 16-39-06 Cobbled paths.png b/iceberg/Screenshot 2024-03-30 at 16-39-06 Cobbled paths.png
new file mode 100644
index 0000000000000000000000000000000000000000..f59c88ffaba4aeb42ee1f545388154af98b3bbc8
Binary files /dev/null and b/iceberg/Screenshot 2024-03-30 at 16-39-06 Cobbled paths.png differ
diff --git a/iceberg/Screenshot 2024-03-30 at 16-44-16 Cobbled paths.png b/iceberg/Screenshot 2024-03-30 at 16-44-16 Cobbled paths.png
new file mode 100644
index 0000000000000000000000000000000000000000..14769d9ba12a1e8edc43913d98f697e88bd43d49
Binary files /dev/null and b/iceberg/Screenshot 2024-03-30 at 16-44-16 Cobbled paths.png differ
diff --git "a/iceberg/besan\303\247on/full-pic.png" "b/iceberg/besan\303\247on/full-pic.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d3d332b2fd6842904bc10a5a43e74b267327a0e3
Binary files /dev/null and "b/iceberg/besan\303\247on/full-pic.png" differ
diff --git "a/iceberg/besan\303\247on/small-pic.png" "b/iceberg/besan\303\247on/small-pic.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e2b8eae5c8c86e21593939b2ea7166e4b38d7df7
Binary files /dev/null and "b/iceberg/besan\303\247on/small-pic.png" differ
diff --git a/iceberg/metascriipt.svg b/iceberg/metascriipt.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2d9362cb77782a1b90c47e29688614c2cd07fa2f
--- /dev/null
+++ b/iceberg/metascriipt.svg
@@ -0,0 +1,199 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="466.47998"
+   height="120"
+   class="svgbob"
+   version="1.1"
+   id="svg70"
+   sodipodi:docname="metascriipt.svg"
+   inkscape:version="1.3.1 (9b9bdc1480, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview70"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     showguides="true"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="214.60691"
+     inkscape:cy="8.4852814"
+     inkscape:window-width="1854"
+     inkscape:window-height="968"
+     inkscape:window-x="0"
+     inkscape:window-y="34"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg70" />
+  <style
+     id="style1">.svgbob line, .svgbob path, .svgbob circle, .svgbob rect, .svgbob polygon {
+  stroke: black;
+  stroke-width: 2;
+  stroke-opacity: 1;
+  fill-opacity: 1;
+  stroke-linecap: round;
+  stroke-linejoin: miter;
+}
+
+.svgbob text {
+  white-space: pre;
+  fill: black;
+  font-family: Iosevka Fixed, monospace;
+  font-size: 14px;
+}
+
+.svgbob rect.backdrop {
+  stroke: none;
+  fill: white;
+}
+
+.svgbob .broken {
+  stroke-dasharray: 8;
+}
+
+.svgbob .filled {
+  fill: black;
+}
+
+.svgbob .bg_filled {
+  fill: white;
+  stroke-width: 1;
+}
+
+.svgbob .nofill {
+  fill: white;
+}
+
+.svgbob .end_marked_arrow {
+  marker-end: url(#arrow);
+}
+
+.svgbob .start_marked_arrow {
+  marker-start: url(#arrow);
+}
+
+.svgbob .end_marked_diamond {
+  marker-end: url(#diamond);
+}
+
+.svgbob .start_marked_diamond {
+  marker-start: url(#diamond);
+}
+
+.svgbob .end_marked_circle {
+  marker-end: url(#circle);
+}
+
+.svgbob .start_marked_circle {
+  marker-start: url(#circle);
+}
+
+.svgbob .end_marked_open_circle {
+  marker-end: url(#open_circle);
+}
+
+.svgbob .start_marked_open_circle {
+  marker-start: url(#open_circle);
+}
+
+.svgbob .end_marked_big_open_circle {
+  marker-end: url(#big_open_circle);
+}
+
+.svgbob .start_marked_big_open_circle {
+  marker-start: url(#big_open_circle);
+}
+
+</style>
+  <defs
+     id="defs4">
+    <marker
+       id="arrow"
+       viewBox="-2 -2 8 8"
+       refX="4"
+       refY="2"
+       markerWidth="7"
+       markerHeight="7"
+       orient="auto-start-reverse">
+      <polygon
+         points="4,2 0,0 0,4 "
+         id="polygon1" />
+    </marker>
+    <marker
+       id="diamond"
+       viewBox="-2 -2 8 8"
+       refX="4"
+       refY="2"
+       markerWidth="7"
+       markerHeight="7"
+       orient="auto-start-reverse">
+      <polygon
+         points="4,2 2,4 0,2 2,0 "
+         id="polygon2" />
+    </marker>
+    <marker
+       id="circle"
+       viewBox="0 0 8 8"
+       refX="4"
+       refY="4"
+       markerWidth="7"
+       markerHeight="7"
+       orient="auto-start-reverse">
+      <circle
+         cx="4"
+         cy="4"
+         r="2"
+         class="filled"
+         id="circle2" />
+    </marker>
+    <marker
+       id="open_circle"
+       viewBox="0 0 8 8"
+       refX="4"
+       refY="4"
+       markerWidth="7"
+       markerHeight="7"
+       orient="auto-start-reverse">
+      <circle
+         cx="4"
+         cy="4"
+         r="2"
+         class="bg_filled"
+         id="circle3" />
+    </marker>
+    <marker
+       id="big_open_circle"
+       viewBox="0 0 8 8"
+       refX="4"
+       refY="4"
+       markerWidth="7"
+       markerHeight="7"
+       orient="auto-start-reverse">
+      <circle
+         cx="4"
+         cy="4"
+         r="3"
+         class="bg_filled"
+         id="circle4" />
+    </marker>
+  </defs>
+  <path
+     id="line70"
+     style="fill:none;stroke:#000000;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none"
+     class="solid"
+     d="M 384.99072,60 V 68 L 372.99072,92 L 380.99072,108 M 360.99072,60 V 76 H 372.99072 L 384.99072,52 V 44 M 336.99072,60 V 76 H 348.99072 L 360.99072,52 V 44 M 412.99072,60 L 404.99072,76 H 384.99072 V 108 M 444.99072,60 L 436.99072,76 H 424.99072 V 28 M 388.99072,60 L 396.99072,44 H 404.99072 L 412.99072,60 H 424.99072 M 192.99072,60 V 76 H 204.99072 L 224.99072,36 L 236.99072,60 L 228.99072,76 L 220.99072,60 M 244.99072,60 L 252.99072,76 H 276.99072 L 292.99072,44 H 312.99072 V 76 H 324.99072 L 336.99072,52 V 44 M 268.99072,44 H 252.99072 L 244.99072,60 H 236.99072 M 164.99072,60 L 172.99072,76 H 180.99072 L 192.99072,52 V 44 H 172.99072 L 156.99072,76 H 144.99072 V 60 M 144.99072,28 V 52 L 132.99072,76 H 112.99072 M 116.99072,60 L 124.99072,44 H 112.99072 V 52 L 100.99072,76 H 88.990723 V 44 H 76.990723 L 68.990723,60 M 64.990723,60 V 44 H 52.990723 L 44.990723,60 M 20.990723,60 L 28.990723,44 H 40.990723 V 60 M 412.99072,44 H 436.99072 M 360.99072,40 V 36 M 336.99072,40 V 36 M 132.99072,44 H 156.99072"
+     sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc" />
+  <rect
+     style="fill:none;stroke:none;stroke-width:8;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0.739727"
+     id="rect70"
+     width="466.47998"
+     height="120"
+     x="0"
+     y="0" />
+</svg>
diff --git a/iceberg/out.svg b/iceberg/out.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c2eb6023215841219754c066371d61f676c24e81
--- /dev/null
+++ b/iceberg/out.svg
@@ -0,0 +1,176 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="408" height="128" class="svgbob">
+  <style>.svgbob line, .svgbob path, .svgbob circle, .svgbob rect, .svgbob polygon {
+  stroke: black;
+  stroke-width: 2;
+  stroke-opacity: 1;
+  fill-opacity: 1;
+  stroke-linecap: round;
+  stroke-linejoin: miter;
+}
+
+.svgbob text {
+  white-space: pre;
+  fill: black;
+  font-family: Iosevka Fixed, monospace;
+  font-size: 14px;
+}
+
+.svgbob rect.backdrop {
+  stroke: none;
+  fill: white;
+}
+
+.svgbob .broken {
+  stroke-dasharray: 8;
+}
+
+.svgbob .filled {
+  fill: black;
+}
+
+.svgbob .bg_filled {
+  fill: white;
+  stroke-width: 1;
+}
+
+.svgbob .nofill {
+  fill: white;
+}
+
+.svgbob .end_marked_arrow {
+  marker-end: url(#arrow);
+}
+
+.svgbob .start_marked_arrow {
+  marker-start: url(#arrow);
+}
+
+.svgbob .end_marked_diamond {
+  marker-end: url(#diamond);
+}
+
+.svgbob .start_marked_diamond {
+  marker-start: url(#diamond);
+}
+
+.svgbob .end_marked_circle {
+  marker-end: url(#circle);
+}
+
+.svgbob .start_marked_circle {
+  marker-start: url(#circle);
+}
+
+.svgbob .end_marked_open_circle {
+  marker-end: url(#open_circle);
+}
+
+.svgbob .start_marked_open_circle {
+  marker-start: url(#open_circle);
+}
+
+.svgbob .end_marked_big_open_circle {
+  marker-end: url(#big_open_circle);
+}
+
+.svgbob .start_marked_big_open_circle {
+  marker-start: url(#big_open_circle);
+}
+
+</style>
+  <defs>
+    <marker id="arrow" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <polygon points="0,0 0,4 4,2 0,0"></polygon>
+    </marker>
+    <marker id="diamond" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <polygon points="0,2 2,0 4,2 2,4 0,2"></polygon>
+    </marker>
+    <marker id="circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <circle cx="4" cy="4" r="2" class="filled"></circle>
+    </marker>
+    <marker id="open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <circle cx="4" cy="4" r="2" class="bg_filled"></circle>
+    </marker>
+    <marker id="big_open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <circle cx="4" cy="4" r="3" class="bg_filled"></circle>
+    </marker>
+  </defs>
+  <rect class="backdrop" x="0" y="0" width="408" height="128"></rect>
+  <line x1="8" y1="16" x2="0" y2="32" class="solid"></line>
+  <line x1="104" y1="48" x2="128" y2="48" class="solid"></line>
+  <line x1="316" y1="44" x2="316" y2="40" class="solid end_marked_open_circle"></line>
+  <line x1="368" y1="48" x2="392" y2="48" class="solid"></line>
+  <g>
+    <line x1="12" y1="16" x2="60" y2="16" class="solid"></line>
+    <line x1="12" y1="16" x2="12" y2="80" class="solid"></line>
+    <line x1="36" y1="16" x2="36" y2="80" class="solid"></line>
+    <line x1="60" y1="16" x2="60" y2="80" class="solid"></line>
+    <line x1="84" y1="48" x2="96" y2="48" class="solid"></line>
+    <line x1="84" y1="48" x2="84" y2="56" class="solid"></line>
+    <line x1="84" y1="56" x2="72" y2="80" class="solid"></line>
+    <line x1="96" y1="48" x2="88" y2="64" class="solid"></line>
+    <line x1="60" y1="80" x2="72" y2="80" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 208,16 A 16,16 0,0,0 208,32" class="nofill"></path>
+    <path d="M 208,16 A 16,16 0,0,1 208,32" class="nofill"></path>
+    <line x1="208" y1="32" x2="184" y2="80" class="solid"></line>
+    <line x1="208" y1="32" x2="232" y2="80" class="solid"></line>
+    <line x1="272" y1="48" x2="292" y2="48" class="solid"></line>
+    <line x1="272" y1="48" x2="256" y2="80" class="solid"></line>
+    <line x1="292" y1="48" x2="292" y2="80" class="solid"></line>
+    <line x1="232" y1="80" x2="256" y2="80" class="solid"></line>
+    <line x1="316" y1="48" x2="316" y2="56" class="solid"></line>
+    <line x1="316" y1="56" x2="304" y2="80" class="solid"></line>
+    <line x1="292" y1="80" x2="304" y2="80" class="solid"></line>
+  </g>
+  <g>
+    <line x1="116" y1="32" x2="116" y2="56" class="solid"></line>
+    <line x1="116" y1="56" x2="104" y2="80" class="solid"></line>
+    <line x1="84" y1="80" x2="104" y2="80" class="solid"></line>
+  </g>
+  <g>
+    <line x1="144" y1="48" x2="164" y2="48" class="solid"></line>
+    <line x1="144" y1="48" x2="128" y2="80" class="solid"></line>
+    <line x1="164" y1="48" x2="164" y2="56" class="solid"></line>
+    <line x1="164" y1="56" x2="152" y2="80" class="solid"></line>
+    <line x1="136" y1="64" x2="144" y2="80" class="solid"></line>
+    <line x1="144" y1="80" x2="152" y2="80" class="solid"></line>
+    <line x1="116" y1="64" x2="116" y2="80" class="solid"></line>
+    <line x1="116" y1="80" x2="128" y2="80" class="solid"></line>
+  </g>
+  <g>
+    <line x1="232" y1="48" x2="248" y2="48" class="solid"></line>
+    <line x1="232" y1="48" x2="216" y2="80" class="solid"></line>
+    <path d="M 200,64 A 16,16 0,0,0 200,80" class="nofill"></path>
+    <line x1="200" y1="80" x2="216" y2="80" class="solid"></line>
+  </g>
+  <g>
+    <line x1="352" y1="48" x2="360" y2="48" class="solid"></line>
+    <line x1="352" y1="48" x2="344" y2="64" class="solid"></line>
+    <line x1="360" y1="48" x2="368" y2="64" class="solid"></line>
+    <line x1="380" y1="32" x2="380" y2="80" class="solid"></line>
+    <line x1="368" y1="64" x2="380" y2="64" class="solid"></line>
+    <line x1="380" y1="80" x2="392" y2="80" class="solid"></line>
+    <line x1="400" y1="64" x2="392" y2="80" class="solid"></line>
+    <line x1="340" y1="80" x2="360" y2="80" class="solid"></line>
+    <line x1="368" y1="64" x2="360" y2="80" class="solid"></line>
+    <line x1="340" y1="80" x2="340" y2="112" class="solid"></line>
+  </g>
+  <g>
+    <line x1="340" y1="48" x2="340" y2="56" class="solid"></line>
+    <line x1="340" y1="56" x2="328" y2="80" class="solid"></line>
+    <line x1="316" y1="64" x2="316" y2="80" class="solid"></line>
+    <line x1="316" y1="80" x2="328" y2="80" class="solid"></line>
+  </g>
+  <g>
+    <line x1="164" y1="64" x2="164" y2="80" class="solid"></line>
+    <line x1="164" y1="80" x2="176" y2="80" class="solid"></line>
+    <line x1="184" y1="64" x2="176" y2="80" class="solid"></line>
+  </g>
+  <g>
+    <line x1="340" y1="64" x2="340" y2="72" class="solid"></line>
+    <line x1="340" y1="72" x2="328" y2="96" class="solid"></line>
+    <line x1="328" y1="96" x2="336" y2="112" class="solid"></line>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/static/css/interface.css b/static/css/interface.css
index d27881819c0120eaeabf4919c97c74f37666a886..0c1c5bb44439c12de690d820dfc26b673cd251cb 100644
--- a/static/css/interface.css
+++ b/static/css/interface.css
@@ -41,23 +41,34 @@ p{
 body{
     margin-top: calc(var(--bar-h) * 1);
 }
+body.write,
 body.catalogue,
 body.draw{
     margin-top: calc(var(--bar-h) * 2);
 }
+body.write .font,
+body.catalogue .font,
+body.draw .font{
+    height: calc(100vh - var(--bar-h) * 2);
+    grid-template-rows: 1fr;
+    box-sizing: border-box;
+}
+
+body > .tabs{
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 99999;
+}
 
 nav ul,
 .controls{
     box-sizing: border-box;
-    position: fixed;
     width: 100%;
-    z-index: 999;
     display: flex;
     align-items: center;
 }
-nav ul{
-    top: 0;
-}
+
 nav ul li{
     flex-grow: 1;
 }
@@ -83,12 +94,13 @@ nav ul a.active{
     ================================================= */
 
 .controls{
+    position: fixed;
     gap: 0.5rem;
     top: var(--bar-h);
     background-color: var(--c-back);
-    border-bottom: 1px solid black;
-    padding: 0rem 2rem;
+    padding: 0rem 1rem;
     height: var(--bar-h);
+    z-index: 99;
 }
 
 h1,h2{
@@ -100,7 +112,9 @@ input, button{
 strong{
     font-weight: bold;
 }
-
+#text-input{
+    width: 26em;
+}
 .controls hr{
     display: block !important;
     border: none;
@@ -128,41 +142,13 @@ label{
     flex: 1 1 0%;
 }
 
-.legend::before{
-    content: '';
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
-    background-color: var(--c);
-    margin-right: 0.5em;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/*  CATEGORIES 
-    ================================================= */
-
-summary{
-    padding: 1rem 2rem;
-    background: black;
-    color: white;
-    border-bottom: whitesmoke solid 1px;
-    cursor: pointer;
-    position: sticky;
-    top: calc(var(--bar-h) * 2);
-
-    z-index: 99;
-}
-
-
-
 /* one font block */
 
 .font{
     display: grid;
-    grid-template-columns: repeat(2, calc(50% - 1rem));
-    gap: 0.5rem 2rem;
-    padding: 0.5rem 2rem 1rem;
+    grid-template-columns: repeat(2, calc(50% - 0.5rem));
+    gap: 1rem;
+    padding: 0 1rem 1rem;
 
     position: relative;
 }
@@ -194,23 +180,31 @@ aside.left{
 .f-ascii{
     font-family: monospace;
     font-size: 1rem;
-    padding: 1rem;
     background-color: white;
     overflow: auto;
 
     line-height: 1;
-
-    grid-column: 1 / span 1;
-    grid-row: 2 / span 1;
 }
 .f-svg{
     padding: 1rem;
     background-color: white;
     overflow: auto;
-
-    grid-column: 2 / span 1;
-    grid-row: 2 / span 1;
 }
+.f-ascii,
+.f-svg{
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    grid-row: 1 / span 1;
+    border: 1px solid black;
+}
+.f-svg iframe{
+    border: none !important;
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
 .f-double{
     width: 100%;
     height: 100%;
@@ -226,25 +220,10 @@ hr{
 hr:last-of-type{
     display: none;
 }
-summary + hr{
-    display: none;
-}
 svg{
     overflow: visible;
 }
 
-/* catalogue colors */
-.font h2::before{
-    content: '';
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
-    background-color: var(--c);
-    margin-right: 0.5em;
-    display: inline-block;
-    vertical-align: middle;
-}
-
 /* autofix colors */
 .fix-label{
     border-bottom: solid limegreen 3px;
@@ -325,51 +304,82 @@ ul.classic{
     margin: 0.5rem 0;
 }
 
-/*  DRAW 
+/*  font 
     ================================================= */
 
-.draw .font{
-    height: calc(100vh - var(--bar-h) * 2);
-    grid-template-rows: 1fr;
-    box-sizing: border-box;
-    padding: 1rem 2rem;
-}
-.draw .f-ascii,
-.draw .f-svg{
-    height: 100%;
-    width: 100%;
-    box-sizing: border-box;
-    grid-row: 1 / span 1;
-    border: 1px solid black;
+.write .font{
+    grid-template-columns:  32rem 1fr;
 }
-.draw .f-ascii{
-    padding: 0;
+
+/*  catalogue 
+    ================================================= */
+
+.catalogue .font{
+    grid-template-columns: 1fr;
 }
-.draw .f-svg{
-    padding: 0;
+
+details{
+    position: relative;
+    z-index: 999;
 }
-.f-svg iframe{
-    border: none !important;
-    width: 100%;
-    height: 100%;
-    display: block;
+details[open] > summary{
+    background-color: var(--c-link);
 }
 
-.figfont{
-    grid-template-columns:  32rem 1fr;
+summary{
+    padding: 0.5rem 1rem;
+    background: black;
+    color: white;
+    cursor: pointer;
+    white-space: nowrap;
+    padding-right: 3rem;
 }
-
-.reload::after{
-    content: 'reload';
+summary span{
+    display: inline-block;
     position: absolute;
-    inset: 0;
-    background-color: rgba(0,0,205,0.2);
-    z-index: 999;
-    pointer-events: none;
-    color: white;
+    right: 0.5rem;
+}
+summary + div{
+    position: absolute;
+    left: 100%;
+    top: 0;
+}
+.collection{
+    width: 75vw;
     display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
+    flex-wrap: wrap;
+}
+.collection > .figfont{
+    padding: 0.5rem 1rem;
+    background: lightgray;
+    cursor: pointer;
+    white-space: nowrap;
+    box-sizing: border-box;
+    outline: 1px solid black;
+    outline-offset: -0.5px;
+}
+.figfont:hover{
+    color: var(--c-link);
+}
 
+/* catalogue colors */
+.figfont::before{
+    content: '';
+    width: 0.75em;
+    height: 0.75em;
+    border-radius: 50%;
+    background-color: var(--c);
+    margin-right: 0.5em;
+    display: inline-block;
+    vertical-align: middle;
+}
+.legend::before{
+    content: '';
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    background-color: var(--c);
+    margin-right: 0.5em;
+    display: inline-block;
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 19b91b2387a25b86e47d4648954fe6dfadb495f0..6aa467d4437f14484782823b2639b8524f258bbf 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -22,12 +22,13 @@
 
   <body class="{% block body_class %}{% endblock %}">
 
-    <nav>
+    <nav class="tabs">
       <ul>
           <li><a {% if request.url_rule.endpoint == "index" %}class="active"{% endif %} href="/"> index</a></li>
           <li><a {% if request.url_rule.endpoint == "draw" %}class="active"{% endif %} href="/draw.html">draw</a></li>
-          <li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">font</a></li>
           <li><a {% if request.url_rule.endpoint == "catalogue" %}class="active"{% endif %} href="/catalogue.html">catalogue</a></li>
+          <li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">font</a></li>
+          <li><a {% if request.url_rule.endpoint == "image" %}class="active"{% endif %} href="/image.html">image</a></li>
       </ul>
     </nav>
 
@@ -35,5 +36,4 @@
 
   </body>
 
-</html>
-
+</html>
\ No newline at end of file
diff --git a/templates/catalogue.html b/templates/catalogue.html
index 7c297692dc96bd332e75ae23399230ca954455e1..78addbe7f300568dd858332d7314c49675b737a2 100644
--- a/templates/catalogue.html
+++ b/templates/catalogue.html
@@ -4,102 +4,125 @@
 
 {% block body %}
 
-    <header class="controls">
-        <label>text</label>
-        <input class="get-input" type="text" value="{{params['text']}}" data-name="t"/>
-        <button onClick="window.location.reload();">generate</button>
-
-        <hr>
-
-        <label>weight</label>
-        <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w"/>
-
-        <label  class="fix-label" for="fix-checkbox"
-                title="custom regex to try to map unrecognized character to ones that are processed by svgbob">
-                autofix</label>
-        <input  id="fix-checkbox" type="checkbox" 
-                class="body-class-check" value="check-fix" checked/>
-
-        <label  class="text-label" for="text-checkbox"
-                title="display the remaining text in the svg output in red">
-                output text</label>
-        <input  id="text-checkbox" type="checkbox" 
-                class="body-class-check" value="check-text" checked/>
-
-        <script>
-            let inputs = document.getElementsByClassName('get-input');
-            for(let input of inputs){
-                input.addEventListener('input', function(){
-                    const url = new URL(window.location.href);
-                    url.searchParams.set(input.dataset.name, input.value);
-                    window.history.replaceState(null, null, url);
-                });
-            }
-            function toggle_class(classname, val){
-                if(val){
-                    document.body.classList.add(classname);
-                }
-                else{
-                    document.body.classList.remove(classname);
-                }
-            }
-            let body_class_checkboxes = document.getElementsByClassName("body-class-check");
-            for(let checkbox of body_class_checkboxes){
-                let classname = checkbox.value;
-                checkbox.addEventListener('input', function(){
-                    toggle_class(classname, checkbox.checked);
-                });
-                toggle_class(classname, checkbox.checked);
-            }
-        </script>
-    </header>
-
-    <div class="box">
-        {% for catalogue, legend in databases.items() %}
-            <div class="legend {{catalogue}}"><strong>{{catalogue}}</strong> {{legend}}</div>
-        {% endfor %}
-    </div>
-
-    {% for type, type_data in output.items()%}
+  <header class="controls">
+    <label>figfont</label>
+    <details>
+      <summary>mini</summary>
+      <div>
+      {% for type, type_data in collection.items()%}
         <details>
-            <summary>{{type}} {{type_data['ascii']}}</summary>
-
-            {% for catalogue in databases.keys() %}
-              {% set fonts = type_data['fonts']|selectattr('catalogue', 'equalto', catalogue) %}
-              {% for f in fonts %}
-              <div class="font {{f['catalogue']}}">
-
-                  <h2>{{f['name']}} ({{f['catalogue']}})</h2>
-
-                  <div class="f-ascii"><pre>{{f['ascii']|safe|escape}}</pre></div>
-                  <div class="f-svg">{{f['svg']|safe|escape}}</div>
-
-                  {% if f['autofix'] %}
-                  <div class="f-ascii fix"><pre>{{f['ascii_fix_indication']|safe|escape}}</pre></div>
-                  <div class="f-svg fix">{{f['svg_fix']|safe|escape}}</div>
-                  {% endif %}
-
-                <aside class="left">
-                    <!-- title="display the font metadata, embedded inside of the figlet file" -->
-                    <button>INFO ?</button>
-                </aside>
-                
-                <aside class="right">
-                    <button>> SVG</button>
-                    <button>> HPGL</button>
-                </aside>
-
-              </div>
-              {% endfor %}
-              <hr>
+          <summary>{{type}} <span>{{type_data['ascii']}}</span></summary>
+          <div class="collection">
+          {% for database in databases.keys() %}
+            {% set fonts = type_data['fonts']|selectattr('database', 'equalto', database) %}
+            {% for f in fonts %}
+              <div value="{{f['figfont']}}" class="{{f['database']}} figfont">{{f['name']}}</div>
             {% endfor %}
-
+          {% endfor %}
+          </div>
         </details>
-    {% endfor %}
-
-    <script>
-
-    </script>
+      {% endfor %}
+      </div>
+    </details>
+
+    <label>input</label>
+    <input class="get-input" id="text-input" type="text" value="{{params['text']}}" data-name="t" data-frame="svg-iframe"/>
+
+    <label  for="upper-checkbox">uppercase</label>
+    <input  id="upper-checkbox" type="checkbox"/>
+
+    <hr>
+
+    <button id="button-svg">generate</button>
+
+    <label>weight</label>
+    <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/>
+
+    <label  class="fix-label" for="fix-checkbox"
+            title="custom regex to try to map unrecognized character to ones that are processed by svgbob">
+            autofix</label>
+    <input  id="fix-checkbox" type="checkbox" 
+            class="body-class-check" value="check-fix" checked/>
+
+    <label  for="text-checkbox"
+            title="display the remaining text in the svg output in red">
+            output text</label>
+    <input  id="text-checkbox" type="checkbox" class="get-input"
+            class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/>
+            
+  </header>
+
+  <div class="font catalogue" id="main">
+    <iframe class="f-double" id="svg-iframe" src="/writing/{{ 'db/default/stroke/mini.flf'.split('/') | join('_') }}">
+    </iframe>
+  </div>
+
+  <script>
+    let button_svg = document.getElementById('button-svg');
+    let svg_iframe = document.getElementById('svg-iframe');
+    let pad_iframe = document.getElementById('pad-iframe');
+
+    let new_url = new URL(svg_iframe.src);
+
+    function updateGET(frame, param, value){
+        // object from GET parameters
+        let [base_src, params_src] = frame.src.split("?");
+        let params = new URLSearchParams(params_src);
+        // update param
+        params.set(param, value);
+        // reconstituate URL
+        let new_src = base_src + "?" + params.toString();
+        // set and refresh
+        frame.src = new_src;
+    }
+
+    // --- svg generation button
+    button_svg.addEventListener('click', function(){
+      svg_iframe.src = new_url;
+      document.getElementById('main').classList.add("reload");
+    });
+
+    // --- get-input but on the pad and checkbox but on the pad
+    let inputs = document.getElementsByClassName('get-input');
+
+    for(let input of inputs){
+      input.addEventListener('change', function(){
+        let frame = document.getElementById(input.dataset.frame);
+        const url = new URL(frame.src);
+
+        if(input.type == 'checkbox'){
+          url.searchParams.set(input.dataset.name, input.checked);
+        }
+        else{
+          url.searchParams.set(input.dataset.name, input.value);
+        }
+        new_url = url;
+      });
+    }
+
+    let upper_checkbox = document.getElementById('upper-checkbox');
+    let text_input = document.getElementById('text-input');
+    upper_checkbox.addEventListener('change', function(){
+      if(upper_checkbox.checked){
+        text_input.value =  text_input.value.toUpperCase();
+        let frame = document.getElementById("svg-iframe");
+        const url = new URL(frame.src);
+        url.searchParams.set(text_input.dataset.name, text_input.value);
+        new_url = url;
+      }
+      else{
+        text_input.value =  text_input.value.toLowerCase();
+        let frame = document.getElementById("svg-iframe");
+        const url = new URL(frame.src);
+        url.searchParams.set(text_input.dataset.name, text_input.value);
+        new_url = url;
+      }
+    })
+
+    svg_iframe.addEventListener("load", function() {
+      document.getElementById('main').classList.remove("reload");
+    });
+</script>
 
 {% endblock %}
 
diff --git a/templates/deprecated_catalogue.html b/templates/deprecated_catalogue.html
new file mode 100644
index 0000000000000000000000000000000000000000..7c297692dc96bd332e75ae23399230ca954455e1
--- /dev/null
+++ b/templates/deprecated_catalogue.html
@@ -0,0 +1,105 @@
+{% extends "base.html" %}
+
+{% block body_class %}catalogue{% endblock %}
+
+{% block body %}
+
+    <header class="controls">
+        <label>text</label>
+        <input class="get-input" type="text" value="{{params['text']}}" data-name="t"/>
+        <button onClick="window.location.reload();">generate</button>
+
+        <hr>
+
+        <label>weight</label>
+        <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w"/>
+
+        <label  class="fix-label" for="fix-checkbox"
+                title="custom regex to try to map unrecognized character to ones that are processed by svgbob">
+                autofix</label>
+        <input  id="fix-checkbox" type="checkbox" 
+                class="body-class-check" value="check-fix" checked/>
+
+        <label  class="text-label" for="text-checkbox"
+                title="display the remaining text in the svg output in red">
+                output text</label>
+        <input  id="text-checkbox" type="checkbox" 
+                class="body-class-check" value="check-text" checked/>
+
+        <script>
+            let inputs = document.getElementsByClassName('get-input');
+            for(let input of inputs){
+                input.addEventListener('input', function(){
+                    const url = new URL(window.location.href);
+                    url.searchParams.set(input.dataset.name, input.value);
+                    window.history.replaceState(null, null, url);
+                });
+            }
+            function toggle_class(classname, val){
+                if(val){
+                    document.body.classList.add(classname);
+                }
+                else{
+                    document.body.classList.remove(classname);
+                }
+            }
+            let body_class_checkboxes = document.getElementsByClassName("body-class-check");
+            for(let checkbox of body_class_checkboxes){
+                let classname = checkbox.value;
+                checkbox.addEventListener('input', function(){
+                    toggle_class(classname, checkbox.checked);
+                });
+                toggle_class(classname, checkbox.checked);
+            }
+        </script>
+    </header>
+
+    <div class="box">
+        {% for catalogue, legend in databases.items() %}
+            <div class="legend {{catalogue}}"><strong>{{catalogue}}</strong> {{legend}}</div>
+        {% endfor %}
+    </div>
+
+    {% for type, type_data in output.items()%}
+        <details>
+            <summary>{{type}} {{type_data['ascii']}}</summary>
+
+            {% for catalogue in databases.keys() %}
+              {% set fonts = type_data['fonts']|selectattr('catalogue', 'equalto', catalogue) %}
+              {% for f in fonts %}
+              <div class="font {{f['catalogue']}}">
+
+                  <h2>{{f['name']}} ({{f['catalogue']}})</h2>
+
+                  <div class="f-ascii"><pre>{{f['ascii']|safe|escape}}</pre></div>
+                  <div class="f-svg">{{f['svg']|safe|escape}}</div>
+
+                  {% if f['autofix'] %}
+                  <div class="f-ascii fix"><pre>{{f['ascii_fix_indication']|safe|escape}}</pre></div>
+                  <div class="f-svg fix">{{f['svg_fix']|safe|escape}}</div>
+                  {% endif %}
+
+                <aside class="left">
+                    <!-- title="display the font metadata, embedded inside of the figlet file" -->
+                    <button>INFO ?</button>
+                </aside>
+                
+                <aside class="right">
+                    <button>> SVG</button>
+                    <button>> HPGL</button>
+                </aside>
+
+              </div>
+              {% endfor %}
+              <hr>
+            {% endfor %}
+
+        </details>
+    {% endfor %}
+
+    <script>
+
+    </script>
+
+{% endblock %}
+
diff --git a/templates/draw.html b/templates/draw.html
index a3e90c2bb66e284d14b7c5c1d6015cd4ef1d672f..6f6a81349e6fb5e8b3868f08c4f1fe3fa7530579 100644
--- a/templates/draw.html
+++ b/templates/draw.html
@@ -20,71 +20,10 @@
             title="display the remaining text in the svg output in red">
             output text</label>
     <input  id="text-checkbox" type="checkbox" class="get-input"
-            class="body-class-check" value="check-text" data-name="t" data-frame="svg-iframe" checked/>
-
-    <script>
-        function updateGET(frame, param, value){
-            // object from GET parameters
-            let [base_src, params_src] = frame.src.split("?");
-            let params = new URLSearchParams(params_src);
-            // update param
-            params.set(param, value);
-            // reconstituate URL
-            let new_src = base_src + "?" + params.toString();
-            // set and refresh
-            frame.src = new_src;
-        }
-
-        let button_pad = document.getElementById('button-pad');
-        let button_svg = document.getElementById('button-svg');
-        
-        // --- pad go button
-        button_pad.addEventListener('click', function(){
-            let svg_iframe = document.getElementById('svg-iframe');
-            let pad_iframe = document.getElementById('pad-iframe');
-            let input = document.getElementById(button_pad.dataset.use);
-            let value = input.value;
-            let param = input.dataset.name;
-
-            let pad_src = pad_iframe.src;
-            pad_src = pad_src.split('-');
-            pad_src[pad_src.length-1] = value;
-            pad_src = pad_src.join('-');
-            pad_iframe.src = pad_src;
-
-            let svg_src = svg_iframe.src;
-            svg_src = svg_src.split('/');
-            svg_src[svg_src.length-1] = value;
-            svg_src = svg_src.join('/');
-            svg_iframe.src = svg_src;
-
-        });
-
-        // --- svg generation button
-        button_svg.addEventListener('click', function(){
-            let svg_iframe = document.getElementById('svg-iframe');
-            svg_iframe.contentWindow.location.reload();
-        });
-
-        // --- get-input but on the pad and checkbox but on the pad
-        let inputs = document.getElementsByClassName('get-input');
-        for(let input of inputs){
-          input.addEventListener('change', function(){
-            let frame = document.getElementById(input.dataset.frame);
-            const url = new URL(frame.src);
-            if(input.type == 'checkbox'){
-              url.searchParams.set(input.dataset.name, input.checked);
-            }
-            else{
-              url.searchParams.set(input.dataset.name, input.value);
-            }
-            frame.src = url;
-          });
-        }
-    </script>
+            class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/>
   </header>
 
-  <div class="font">
+  <div class="font reload" id="main">
     <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
     </iframe>
     <div class="f-svg">
@@ -93,5 +32,77 @@
     </div>
   </div>
 
+  <script>
+    let button_pad = document.getElementById('button-pad');
+    let button_svg = document.getElementById('button-svg');
+    let svg_iframe = document.getElementById('svg-iframe');
+    let pad_iframe = document.getElementById('pad-iframe');
+
+    let new_url = new URL(svg_iframe.src);
+
+    function updateGET(frame, param, value){
+        // object from GET parameters
+        let [base_src, params_src] = frame.src.split("?");
+        let params = new URLSearchParams(params_src);
+        // update param
+        params.set(param, value);
+        // reconstituate URL
+        let new_src = base_src + "?" + params.toString();
+        // set and refresh
+        frame.src = new_src;
+    }
+    
+    // --- pad go button
+    button_pad.addEventListener('click', function(){
+      let input = document.getElementById(button_pad.dataset.use);
+      let value = input.value;
+      let param = input.dataset.name;
+
+      let pad_src = pad_iframe.src;
+      pad_src = pad_src.split('-');
+      pad_src[pad_src.length-1] = value;
+      pad_src = pad_src.join('-');
+      pad_iframe.src = pad_src;
+
+      let svg_src = svg_iframe.src;
+      svg_src = svg_src.split('/');
+      svg_src[svg_src.length-1] = value;
+      svg_src = svg_src.join('/');
+
+      new_url = new URL(svg_iframe.src);
+
+      document.getElementById('main').classList.add("reload");
+      svg_iframe.src = svg_src;
+    });
+
+    // --- svg generation button
+    button_svg.addEventListener('click', function(){
+      svg_iframe.src = new_url;
+      document.getElementById('main').classList.add("reload");
+    });
+
+    // --- get-input but on the pad and checkbox but on the pad
+    let inputs = document.getElementsByClassName('get-input');
+
+    for(let input of inputs){
+      input.addEventListener('change', function(){
+        let frame = document.getElementById(input.dataset.frame);
+        const url = new URL(frame.src);
+
+        if(input.type == 'checkbox'){
+          url.searchParams.set(input.dataset.name, input.checked);
+        }
+        else{
+          url.searchParams.set(input.dataset.name, input.value);
+        }
+        new_url = url;
+      });
+    }
+
+    svg_iframe.addEventListener("load", function() {
+      document.getElementById('main').classList.remove("reload");
+    });
+</script>
+
 {% endblock %}
 
diff --git a/templates/drawing.html b/templates/drawing.html
index 70e385355d4a63b1d022428db992be046953325f..f34a745ec0ed68ca35153025bb38c7e32e9ead6e 100644
--- a/templates/drawing.html
+++ b/templates/drawing.html
@@ -21,6 +21,9 @@
       body.check-text .svgbob text{
           visibility: visible;
       }
+      input, button{
+        font-family: monospace;
+      }
     </style>
   </head>
 
@@ -28,12 +31,13 @@
 
     {{ svg|safe }}
 
-    <button id="save-svg">> SVG</button>
+    <button id="save-svg">get SVG</button>
 
     <script>
       function get2bodyclass(){
         const url = new URL(window.location.href);
-        let checked = url.searchParams.get("c");
+        let checked; 
+        checked = url.searchParams.get("c");
         if(checked == "false"){
           document.body.classList.remove("check-text");
         }
diff --git a/templates/font.html b/templates/font.html
index 749e75aa57aecc9847919f17cb343e6e63d16535..9b814962235c0b7175dfcfe0a895329d4acea436 100644
--- a/templates/font.html
+++ b/templates/font.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% block body_class %}draw{% endblock %}
+{% block body_class %}write{% endblock %}
 
 {% block body %}
 
@@ -9,15 +9,16 @@
     <input id="pad-name" type="text" value="{{params['pad']}}" data-name="p"/>
     <button id="button-pad" data-use="pad-name">go</button>
 
-    <hr>
-
-    <button id="button-svg">generate</button>
-
+    <label>input</label>
     <input class="get-input" id="text-input" type="text" value="{{params['text']}}" data-name="t" data-frame="svg-iframe"/>
 
     <label  for="upper-checkbox">uppercase</label>
     <input  id="upper-checkbox" type="checkbox"/>
 
+    <hr>
+
+    <button id="button-svg">generate</button>
+
     <label>weight</label>
     <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/>
 
@@ -26,74 +27,9 @@
             output text</label>
     <input  id="text-checkbox" type="checkbox" class="get-input"
             class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/>
-
-    <script>
-        function updateGET(frame, param, value){
-            // object from GET parameters
-            let [base_src, params_src] = frame.src.split("?");
-            let params = new URLSearchParams(params_src);
-            // update param
-            params.set(param, value);
-            // reconstituate URL
-            let new_src = base_src + "?" + params.toString();
-            // set and refresh
-            frame.src = new_src;
-        }
-
-        let button_pad = document.getElementById('button-pad');
-        let button_svg = document.getElementById('button-svg');
-        
-        // --- pad go button
-        button_pad.addEventListener('click', function(){
-            let svg_iframe = document.getElementById('svg-iframe');
-            let pad_iframe = document.getElementById('pad-iframe');
-            let input = document.getElementById(button_pad.dataset.use);
-            let value = input.value;
-            let param = input.dataset.name;
-
-            let pad_src = pad_iframe.src;
-            pad_src = pad_src.split('-');
-            pad_src[pad_src.length-1] = value;
-            pad_src = pad_src.join('-');
-            pad_iframe.src = pad_src;
-
-            let svg_src = svg_iframe.src;
-            svg_src = svg_src.split('/');
-            svg_src[svg_src.length-1] = value;
-            svg_src = svg_src.join('/');
-            svg_iframe.src = svg_src;
-
-        });
-
-        // --- svg generation button
-        button_svg.addEventListener('click', function(){
-          let svg_iframe = document.getElementById('svg-iframe');
-          console.log("IFRAME RELOAD");
-          svg_iframe.contentWindow.location.reload();
-        });
-
-        // --- get-input but on the pad and checkbox but on the pad
-        let inputs = document.getElementsByClassName('get-input');
-        for(let input of inputs){
-          input.addEventListener('change', function(){
-            let frame = document.getElementById(input.dataset.frame);
-            const url = new URL(frame.src);
-
-            if(input.type == 'checkbox'){
-              url.searchParams.set(input.dataset.name, input.checked);
-            }
-            else{
-              url.searchParams.set(input.dataset.name, input.value);
-            }
-            console.log(url);
-            // frame.contentWindow.history.replaceState(null, null, url);
-            frame.src = url
-          });
-        }
-    </script>
   </header>
 
-  <div class="font figfont reload" id="main">
+  <div class="font reload" id="main">
     <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
     </iframe>
     <iframe class="f-double" id="svg-iframe" src="/writing/{{params['pad']}}">
@@ -106,6 +42,8 @@
     let svg_iframe = document.getElementById('svg-iframe');
     let pad_iframe = document.getElementById('pad-iframe');
 
+    let new_url = new URL(svg_iframe.src);
+
     function updateGET(frame, param, value){
         // object from GET parameters
         let [base_src, params_src] = frame.src.split("?");
@@ -135,19 +73,21 @@
         svg_src[svg_src.length-1] = value;
         svg_src = svg_src.join('/');
 
+        new_url = new URL(svg_iframe.src);
+
         document.getElementById('main').classList.add("reload");
         svg_iframe.src = svg_src;
-
     });
 
     // --- svg generation button
     button_svg.addEventListener('click', function(){
+      svg_iframe.src = new_url;
       document.getElementById('main').classList.add("reload");
-      svg_iframe.contentWindow.location.reload();
     });
 
     // --- get-input but on the pad and checkbox but on the pad
     let inputs = document.getElementsByClassName('get-input');
+
     for(let input of inputs){
       input.addEventListener('change', function(){
         let frame = document.getElementById(input.dataset.frame);
@@ -159,9 +99,7 @@
         else{
           url.searchParams.set(input.dataset.name, input.value);
         }
-        // frame.contentWindow.history.replaceState(null, null, url);
-        document.getElementById('main').classList.add("reload");
-        frame.src = url;
+        new_url = url;
       });
     }
 
@@ -173,16 +111,14 @@
         let frame = document.getElementById("svg-iframe");
         const url = new URL(frame.src);
         url.searchParams.set(text_input.dataset.name, text_input.value);
-        document.getElementById('main').classList.add("reload");
-        frame.src = url
+        new_url = url;
       }
       else{
         text_input.value =  text_input.value.toLowerCase();
         let frame = document.getElementById("svg-iframe");
         const url = new URL(frame.src);
         url.searchParams.set(text_input.dataset.name, text_input.value);
-        document.getElementById('main').classList.add("reload");
-        frame.src = url
+        new_url = url;
       }
     })
 
diff --git a/templates/image.html b/templates/image.html
new file mode 100644
index 0000000000000000000000000000000000000000..d2ba06283a1e061e47f470d81f93f34e492daad7
--- /dev/null
+++ b/templates/image.html
@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+
+{% block body_class %}image{% endblock %}
+
+{% block body %}
+
+  <header class="controls">
+    <button id="button-image">import image</button>
+
+    <hr>
+
+    <button id="button-svg">generate</button>
+
+    <input class="get-input" id="text-input" type="text" value=" ()/\|'-._=+" data-name="t" data-frame="svg-iframe"/>
+
+    <label>weight</label>
+    <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/>
+
+    <label  class="text-label" for="text-checkbox"
+            title="display the remaining text in the svg output in red">
+            output text</label>
+    <input  id="text-checkbox" type="checkbox" class="get-input"
+            class="body-class-check" value="check-text" data-name="t" data-frame="svg-iframe" checked/>
+
+  </header>
+
+  <div class="font">
+    <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
+    </iframe>
+    <div class="f-svg">
+        <iframe id="svg-iframe" src="/drawing/{{params['pad']}}">
+        </iframe>
+    </div>
+  </div>
+
+{% endblock %}
+
diff --git a/templates/writing.html b/templates/writing.html
index 46aa591f5a6305e247ee13f8368d5aa0a055802a..0e08a0b3dd8b8017dddd7397fd5d63968cba56ef 100644
--- a/templates/writing.html
+++ b/templates/writing.html
@@ -44,6 +44,9 @@
       .f-svg svg{
         overflow: visible;
       }
+      input, button{
+        font-family: monospace;
+      }
     </style>
   </head>
 
@@ -55,7 +58,7 @@
 
     <div class="f-ascii"><pre>{{ ascii|safe }}</pre></div>
 
-    <button id="save-svg">> SVG</button>
+    <button id="save-svg">get SVG</button>
 
     <script>
       function get2bodyclass(){