diff --git a/README.md b/README.md
index 46c4938..cb42e12 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ smooth connected paths are made out of an extremely restrictive grid, like multi
 * flask
 * figlet
 * svgbob
-* [optional] [vpype](https://github.com/abey79/vpype), for converting to HPGL
+* [vpype](https://github.com/abey79/vpype), for converting to HPGL
 
 ## installation
 
@@ -54,15 +54,18 @@ Please follow the [installation instructions](https://github.com/abey79/vpype#in
 * figlet font library of JavE (a free Ascii Editor), <http://www.jave.de/figlet/fonts.html>. those also include the figlet ftp native, they where sorted in order to keep only the uniques ones.
 
 
+<!-- 
 ## todo
 
-* redo catalogue!
+* vpype simplify
+* reload bug in draw
 
+* image tab
+* better 
 
-* iframe per category for less computing time 
-* left and right reload in draw & font
 * input listen when opening page (for browser history remember)
 * factorise JS
 * factorise CSS
 * show font-info file
-* option to save as hpgl
+
+-->
diff --git a/__pycache__/hpgl_multipen_encoder.cpython-38.pyc b/__pycache__/hpgl_multipen_encoder.cpython-38.pyc
index c390ed8..629aa72 100644
Binary files a/__pycache__/hpgl_multipen_encoder.cpython-38.pyc and b/__pycache__/hpgl_multipen_encoder.cpython-38.pyc differ
diff --git a/__pycache__/hpgl_multipen_output.cpython-38.pyc b/__pycache__/hpgl_multipen_output.cpython-38.pyc
index 94a2efa..98b904e 100644
Binary files a/__pycache__/hpgl_multipen_output.cpython-38.pyc and b/__pycache__/hpgl_multipen_output.cpython-38.pyc differ
diff --git a/__pycache__/svg_to_hpgl.cpython-38.pyc b/__pycache__/svg_to_hpgl.cpython-38.pyc
index be192cf..c7d938a 100644
Binary files a/__pycache__/svg_to_hpgl.cpython-38.pyc and b/__pycache__/svg_to_hpgl.cpython-38.pyc differ
diff --git a/app.py b/app.py
index 13a7e7c..5ef9e6a 100644
--- a/app.py
+++ b/app.py
@@ -6,13 +6,12 @@ import sys
 import tempfile
 import io
 import requests
-# from svg_to_hpgl import svgToHPGL
 
 app = Flask(__name__)
 
 title = 'Cobbled paths'
 
-fonts_directory = 'db/'
+fonts_directory = 'static/db/'
 possible_extensions = [".flf"]
 etherpad = 'https://pad.constantvzw.org/p/'
 prefix = 'cobbled-pad-'
@@ -86,14 +85,51 @@ def text2figlet(text, figfont):
         
     return answer
 
-def ascii2svg(ascii, weight):
+def ascii2svg(ascii, weight='3', scale='1'):
     if ascii:
         print('--- SVGBOB SUBPROCESS')
-        svgbob = subprocess.run(["svgbob_cli", '--stroke-width', weight], input = ascii, stdout = subprocess.PIPE, text=True)
+        svgbob = subprocess.run([
+            "svgbob_cli", 
+                '--stroke-width', weight, 
+                '--scale', scale], 
+            input = ascii, 
+            stdout = subprocess.PIPE, text=True)
         return svgbob.stdout
     else:
         return "ERROR: etherpad request failed"
 
+def simplifySVG(svg):
+
+    # store as a temporary file
+    (svg_file, svg_path) = tempfile.mkstemp('.svg')
+    (svg_file_cleaned, svg_path_cleaned) = tempfile.mkstemp('.svg')
+
+    with open(svg_file, 'w') as svg_handle:
+        svg_handle.write(svg)
+
+    vpype = subprocess.run([
+        "vpype",
+        "read",
+            "--single-layer", svg_path,
+        "linesimplify",
+            "-t", "0.05mm",
+        "linemerge",
+            "-t", "0.25mm",
+        "linesort",
+        "write",
+            svg_path_cleaned
+    ])
+    
+    response = ''
+    with open(svg_file_cleaned, 'r') as svg_handle_cleaned:
+        response = svg_handle_cleaned.read()
+    
+    # remove tmp file
+    os.remove(svg_path)
+    os.remove(svg_path_cleaned)
+    
+    return response
+
 def ascii_autofix(ascii):
     print('--- REGEX AUTOFIX')
     for regex, replace in autofix:
@@ -149,11 +185,21 @@ def parse_collection():
                     f = {}
                     f['name'] = name
                     f['database'] = database
-                    f['figfont'] = figfont
+                    f['path'] = figfont
 
                     # sort them by type
                     collection[type]['fonts'].append(f)
 
+                    # make thumbnail
+                    thumbnail_ascii = text2figlet("A", figfont)[1]
+                    thumbnail_svg = ascii2svg(thumbnail_ascii, '2', '0.66')
+                    thumbnail_path = os.path.join(root, basename) + '.svg'
+                    thumbnail_file = open(thumbnail_path, "w")
+                    thumbnail_file.write(thumbnail_svg)
+                    thumbnail_file.close()
+                    f['thumbnail'] = '/' + thumbnail_path
+
+
 
 # ROUTES
 # ------------------------------
@@ -256,7 +302,7 @@ def writing(id):
 
     if '.flf' in params['pad']:
         # it's not a pad it's a local figfont file
-        figfont = '/'.join(params['pad'].split('_'))
+        figfont = '/'.join(params['pad'].split('$'))
         figlet_answer = text2figlet(params['text'], figfont)
 
         if figlet_answer[0]:
@@ -315,14 +361,36 @@ def catalogue():
         collection = collection,
         params = params)
 
+@app.route("/specimen/<type>")
+def specimen(type):
+
+    params = {
+        'text': request.args.get('t') or 'Plotter Station',
+        'weight': request.args.get('w') or '3',
+    }
+
+    total = ''
+    for figfont in collection[type]['fonts']:
+
+        figlet_answer = text2figlet(params['text'], figfont['path'])
+        if figlet_answer[0]:
+            total = total + figlet_answer[1] + '"' + figfont['name'] + '(' + figfont['database'] + ')' + '"\n\n'
+
+
+    svg = ascii2svg(total, params['weight'])
+
+    return render_template(
+        'drawing.html',
+        title = title,
+        params = params,
+        svg = svg)
+
 #  _                 _                              _   
 # | |__  _ __   __ _| |   _____  ___ __   ___  _ __| |_ 
 # | '_ \| '_ \ / _` | |  / _ \ \/ / '_ \ / _ \| '__| __|
 # | | | | |_) | (_| | | |  __/>  <| |_) | (_) | |  | |_ 
 # |_| |_| .__/ \__, |_|  \___/_/\_\ .__/ \___/|_|   \__|
 #       |_|    |___/              |_|   
-# 
-# FIGLET 2 SVGBOB INTERACTIVE CATALOGUE
 
 def resizeSVG (m):
     width = int(m.group(1))
@@ -335,6 +403,20 @@ def resizeSVG (m):
 
     return f'<svg xmlns="http://www.w3.org/2000/svg" viewbox="{viewbox}" width="{newWidth}mm" height="{newHeight}mm" class="svgbob">'
 
+# @app.route('/svg/<id>')
+# def svg (id):
+#     params = {
+#         'pad': id or 'default',
+#         'weight': request.args.get('w') or '3',
+#     }
+#     params['pad-full'] = etherpad + prefix + params['pad']
+
+#     # get pad content
+#     print('  getting ' + params['pad-full'])
+#     pad_export = requests.get(params['pad-full'] + '/export/txt')
+#     ascii = pad_export.text
+
+
 @app.route('/hpgl/<id>')
 def hpgl (id):
     params = {
@@ -369,6 +451,8 @@ def hpgl (id):
             svg_path,
         "scaleto",
             "297mm", "420mm",
+        "linesimplify",
+            "-t", "0.05mm",
         "linemerge",
             "-t", "0.25mm",
         "linesort",
@@ -391,6 +475,8 @@ def hpgl (id):
     os.remove(hpgl_path)
     return r
 
+
+
 if __name__ == '__main__':
     parse_collection()
     app.run(debug=True, host='0.0.0.0')
\ No newline at end of file
diff --git a/hpgl_multipen_encoder.py b/deprecated/hpgl_multipen_encoder.py
similarity index 100%
rename from hpgl_multipen_encoder.py
rename to deprecated/hpgl_multipen_encoder.py
diff --git a/hpgl_multipen_output.py b/deprecated/hpgl_multipen_output.py
similarity index 100%
rename from hpgl_multipen_output.py
rename to deprecated/hpgl_multipen_output.py
diff --git a/hpgl_output_adapted.py b/deprecated/hpgl_output_adapted.py
similarity index 100%
rename from hpgl_output_adapted.py
rename to deprecated/hpgl_output_adapted.py
diff --git a/svg_to_hpgl.py b/deprecated/svg_to_hpgl.py
similarity index 100%
rename from svg_to_hpgl.py
rename to deprecated/svg_to_hpgl.py
diff --git a/static/css/basics.css b/static/css/basics.css
new file mode 100644
index 0000000..775aeed
--- /dev/null
+++ b/static/css/basics.css
@@ -0,0 +1,108 @@
+
+
+body{
+    font-family: monospace;
+    font-size: 0.875rem;
+    line-height: 1.45;
+
+}
+a{
+    color: var(--c-link);
+}
+a:hover{
+    font-weight: bold;
+}
+p{
+    margin: 0.5rem 0;
+}
+
+
+h1,h2{
+    font-weight: bold;
+}
+hr{
+    border: 0;
+    border-top: 1px solid black;
+    margin: 1rem 0 1rem;
+}
+hr:last-of-type{
+    display: none;
+}
+
+strong{
+    font-weight: bold;
+}
+label{
+    font-weight: bold;
+}
+
+input, button, label{
+    font-family: monospace;
+    display: block;
+    font-size: 0.875rem;
+}
+label, input{
+    display: inline-block;
+}
+
+#save-buttons{
+    position: fixed;
+    top: 0.5rem;
+    right: 0.5em;
+}
+#save-buttons > input,
+#save-buttons > button, 
+#save-buttons > label{
+    margin-bottom: 0.5rem;
+    margin-left: auto;
+}
+
+.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;
+}
+
+
+
+.svgbob text {
+    font-family: monospace !important;
+    font-weight: bold !important;
+    fill: red !important;
+}
+.svgbob text{
+    visibility: hidden;
+}
+body.check-text .svgbob text{
+    visibility: visible;
+}
+svg{
+    overflow: visible;
+}
+/* autofix colors */
+.fix-label{
+    border-bottom: solid limegreen 3px;
+}
+.fix{
+    outline: 1px solid limegreen;
+}
+span.fix{
+    outline: none;
+    color: limegreen;
+    font-weight: bold;
+}
+
diff --git a/static/css/interface.css b/static/css/interface.css
index c6a283e..9f9109a 100644
--- a/static/css/interface.css
+++ b/static/css/interface.css
@@ -1,13 +1,11 @@
+
 :root{
     --bar-h: 3rem;
-
     --c-link: blue;
     --c-back: whitesmoke;
-
     --c-default: black;
     --c-contributed: palegreen;
     --c-jave: mediumpurple;
-
 }
 .default{
     --c: var(--c-default);
@@ -18,21 +16,8 @@
 .jave{
     --c: var(--c-jave);
 }
-
 body{
     background-color: var(--c-back);
-    font-family: monospace;
-    font-size: 0.875rem;
-    line-height: 1.45;
-}
-a{
-    color: var(--c-link);
-}
-a:hover{
-    font-weight: bold;
-}
-p{
-    margin: 0.5rem 0;
 }
 
 /*  BAR 
@@ -103,15 +88,6 @@ nav ul a.active{
     z-index: 99;
 }
 
-h1,h2{
-    font-weight: bold;
-}
-input, button{
-    font-family: monospace;
-}
-strong{
-    font-weight: bold;
-}
 #text-input{
     width: 26em;
 }
@@ -121,9 +97,6 @@ strong{
     margin: none;
     margin-left: auto;
 }
-label{
-    font-weight: bold;
-}
 
 .reload::after{
     content: 'reload';
@@ -145,8 +118,7 @@ label{
 
 .box{
     box-sizing: border-box;
-    padding: 1rem 2rem;
-    border-bottom: 1px solid black;
+    padding: 0 2rem 1rem;
 }
 .two-columns{
     display: flex;
@@ -223,76 +195,34 @@ aside.left{
     width: 100%;
     height: 100%;
 }
-hr{
-    border: 0;
-    border-top: 1px solid black;
-    margin: 1rem 0 1rem;
-}
+
 .font:first-of-type{
     margin-top: 1rem;
 }
-hr:last-of-type{
-    display: none;
-}
-svg{
-    overflow: visible;
-}
-
-/* autofix colors */
-.fix-label{
-    border-bottom: solid limegreen 3px;
-}
-.fix{
-    outline: 1px solid limegreen;
-}
-span.fix{
-    outline: none;
-    color: limegreen;
-    font-weight: bold;
-}
-
-.text-label{
-    border-bottom: solid red 3px;
-}
-.svgbob text {
-    font-family: monospace !important;
-    font-weight: bold !important;
-    fill: red !important;
-}
-
-/* body class checkboxes */
-.font div.fix{
-    visibility: hidden;
-}
-body.check-fix .font div.fix{
-    visibility: visible;
-}
-.svgbob text{
-    visibility: hidden;
-}
-body.check-text .svgbob text{
-    visibility: visible;
-}
 
 /*  TITLE 
     ================================================= */
 
 .title.font{
-    padding: 3rem 2rem;
+    padding: 2rem 2rem;
     gap: 1rem var(--bar-h);
     grid-template-columns: repeat(2, calc(50% - calc(var(--bar-h) / 2)));
 }
 .title .f-ascii{
     margin-left: auto;
-    padding: 0;
-    background: initial;
     grid-row: auto;
 }
 .title .f-svg{
     grid-row: auto;
     margin-right: auto;
     padding: 0;
+}
+.title .f-ascii,
+.title .f-svg{
+    padding: 0;
     background: initial;
+    border: none;
+    width: auto;
 }
 .title .special{
     grid-column: 1 / -1;
@@ -303,14 +233,20 @@ ul.special{
     display: flex;
     gap: 1rem;
     justify-content: center;
-    align-items: baseline;
+    align-items: center;
 }
-.special a{
+.special .materiality{
     display: block;
     border: 1px solid currentColor;
-    padding: 2rem 3rem;
+    padding: 1rem 2rem;
     border-radius: 2rem;
     text-decoration: none;
+    text-align: center;
+}
+.special .choice{
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
 }
 ul.classic{
     list-style: initial;
@@ -338,15 +274,38 @@ details{
 }
 details[open] > summary{
     background-color: var(--c-link);
+    color: white;
+}
+
+.collection-menu{
+    position: relative;
+}
+.collection-menu[open] .collection-menu-back{
+    position: fixed;
+    inset: 0;
+    top: var(--bar-h);
+    padding: 0 1rem 1rem;
+    background-color: rgba(240, 240, 240, 0.85);
+    background-color: var(--c-back);
+}
+.collection-menu-back{
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
 }
 
 summary{
-    padding: 0.5rem 1rem;
-    background: black;
-    color: white;
+    padding: calc(1rem - 1px) 1rem;
+    height: var(--bar-h);
+    border-top: 1px solid var(--c-back);
+    box-sizing: border-box;
+    background: lightgray;
+    color: black;
     cursor: pointer;
     white-space: nowrap;
     padding-right: 3rem;
+    z-index: 999;
+    position: relative;
 }
 summary span{
     display: inline-block;
@@ -355,45 +314,70 @@ summary span{
 }
 summary + div{
     position: absolute;
-    left: 100%;
+    left: calc(100% + 1px);
     top: 0;
 }
 .collection{
+    position: absolute;
+    left: calc(100% + 1px);
+    top: calc(-1 * var(--bar-h) * calc(var(--index) - 1) + 1px);
+
+    max-height: calc(100vh - 1px - calc(var(--bar-h) * 2));
+    overflow: auto;
+    
     width: 75vw;
     display: flex;
     flex-wrap: wrap;
+    gap: 1px;
+
+    padding-bottom: var(--bar-h);
+    box-sizing: border-box;
 }
 .collection > .figfont{
-    padding: 0.5rem 1rem;
+    padding: 0rem 0.5rem;
     background: lightgray;
     cursor: pointer;
     white-space: nowrap;
     box-sizing: border-box;
-    outline: 1px solid black;
-    outline-offset: -0.5px;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.25rem;
+    position: relative;
+}
+.specimen-link {
+	display: flex;
+	align-items: center;
+	padding: 1em;
 }
 .figfont:hover{
     color: var(--c-link);
 }
 
 /* catalogue colors */
-.figfont::before{
+.figfont::after{
     content: '';
-    width: 0.75em;
-    height: 0.75em;
+    width: 0.75rem;
+    height: 0.75rem;
     border-radius: 50%;
     background-color: var(--c);
-    margin-right: 0.5em;
     display: inline-block;
-    vertical-align: middle;
+    position: absolute;
+    top: 0.25rem;
+    right: 0.5rem;
+}
+.thumbnail{
+    mix-blend-mode: darken;
+    display: block;
 }
 .legend::before{
     content: '';
-    width: 1em;
-    height: 1em;
+    width: 0.75rem;
+    height: 0.75rem;
     border-radius: 50%;
     background-color: var(--c);
-    margin-right: 0.5em;
+    margin-right: 0.5rem;
     display: inline-block;
     vertical-align: middle;
 }
\ No newline at end of file
diff --git a/db/contributed/3d/isometric1.flf b/static/db/contributed/3d/isometric1.flf
similarity index 100%
rename from db/contributed/3d/isometric1.flf
rename to static/db/contributed/3d/isometric1.flf
diff --git a/static/db/contributed/3d/isometric1.svg b/static/db/contributed/3d/isometric1.svg
new file mode 100644
index 0000000..6e3d084
--- /dev/null
+++ b/static/db/contributed/3d/isometric1.svg
@@ -0,0 +1,157 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="126.72" 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="79.200005" height="126.72"></rect>
+  <text x="27.720001" y="29.04" >::</text>
+  <text x="38.280003" y="39.600002" >:</text>
+  <text x="17.16" y="50.160004" >:</text>
+  <text x="43.56" y="50.160004" >:</text>
+  <text x="11.88" y="60.72" >:</text>
+  <text x="27.720001" y="60.72" >:</text>
+  <text x="33" y="71.28001" >:</text>
+  <text x="43.56" y="81.840004" >:</text>
+  <text x="33" y="102.96001" >:</text>
+  <g>
+    <line x1="31.68" y1="10.56" x2="47.52" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="29.04" y2="15.84" class="solid"></line>
+    <line x1="29.04" y1="15.84" x2="29.04" y2="21.12" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="58.08" y2="63.36" class="solid"></line>
+    <line x1="34.32" y1="15.84" x2="34.32" y2="21.12" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="73.920006" y2="63.36" class="solid"></line>
+    <line x1="39.600002" y1="26.400002" x2="39.600002" y2="31.68" class="solid"></line>
+    <line x1="44.88" y1="36.960003" x2="44.88" y2="42.24" class="solid"></line>
+    <line x1="50.160004" y1="47.52" x2="50.160004" y2="73.920006" class="broken"></line>
+    <line x1="58.08" y1="63.36" x2="73.920006" y2="63.36" class="solid"></line>
+    <line x1="58.08" y1="63.36" x2="31.68" y2="116.16" class="solid"></line>
+    <line x1="73.920006" y1="63.36" x2="47.52" y2="116.16" class="solid"></line>
+    <line x1="31.68" y1="95.04" x2="26.400002" y2="105.600006" class="solid"></line>
+    <line x1="26.400002" y1="105.600006" x2="31.68" y2="116.16" class="solid"></line>
+    <line x1="31.68" y1="116.16" x2="47.52" y2="116.16" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="21.12" x2="23.76" y2="26.400002" class="solid"></line>
+    <line x1="23.76" y1="26.400002" x2="23.76" y2="52.800003" class="broken"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="31.68" x2="18.480001" y2="36.960003" class="solid"></line>
+    <line x1="18.480001" y1="36.960003" x2="18.480001" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="31.68" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="31.68" y1="31.68" x2="47.52" y2="63.36" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="42.24" y2="73.920006" class="solid"></line>
+    <line x1="29.04" y1="47.52" x2="39.600002" y2="47.52" class="broken"></line>
+    <line x1="29.04" y1="47.52" x2="29.04" y2="52.800003" class="solid"></line>
+    <line x1="34.32" y1="58.08" x2="34.32" y2="63.36" class="solid"></line>
+    <line x1="39.600002" y1="68.64" x2="39.600002" y2="95.04" class="broken"></line>
+    <line x1="47.52" y1="63.36" x2="44.88" y2="68.64" class="solid"></line>
+    <line x1="44.88" y1="68.64" x2="44.88" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="42.24" x2="13.200001" y2="47.52" class="solid"></line>
+    <line x1="13.200001" y1="47.52" x2="13.200001" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="10.56" y1="52.800003" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="21.12" y1="52.800003" x2="10.56" y2="73.920006" class="solid"></line>
+    <line x1="21.12" y1="52.800003" x2="36.960003" y2="84.48" class="solid"></line>
+    <line x1="5.28" y1="63.36" x2="10.56" y2="73.920006" class="solid"></line>
+    <line x1="10.56" y1="73.920006" x2="31.68" y2="73.920006" class="solid"></line>
+    <line x1="36.960003" y1="84.48" x2="34.32" y2="89.76" class="solid"></line>
+    <line x1="34.32" y1="89.76" x2="34.32" y2="95.04" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/3d/isometric2.flf b/static/db/contributed/3d/isometric2.flf
similarity index 100%
rename from db/contributed/3d/isometric2.flf
rename to static/db/contributed/3d/isometric2.flf
diff --git a/static/db/contributed/3d/isometric2.svg b/static/db/contributed/3d/isometric2.svg
new file mode 100644
index 0000000..34a105e
--- /dev/null
+++ b/static/db/contributed/3d/isometric2.svg
@@ -0,0 +1,163 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="126.72" 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="79.200005" height="126.72"></rect>
+  <text x="27.720001" y="29.04" >::</text>
+  <text x="22.44" y="39.600002" >:</text>
+  <text x="17.16" y="50.160004" >:</text>
+  <text x="43.56" y="50.160004" >:</text>
+  <text x="33" y="60.72" >:</text>
+  <text x="48.84" y="60.72" >:</text>
+  <text x="27.720001" y="71.28001" >:</text>
+  <text x="17.16" y="81.840004" >:</text>
+  <text x="27.720001" y="102.96001" >:</text>
+  <g>
+    <line x1="31.68" y1="10.56" x2="47.52" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="29.04" y2="15.84" class="solid"></line>
+    <line x1="29.04" y1="15.84" x2="29.04" y2="21.12" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="58.08" y2="63.36" class="solid"></line>
+    <line x1="34.32" y1="15.84" x2="34.32" y2="21.12" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="73.920006" y2="63.36" class="solid"></line>
+    <line x1="39.600002" y1="26.400002" x2="39.600002" y2="52.800003" class="broken"></line>
+    <line x1="44.88" y1="36.960003" x2="44.88" y2="42.24" class="solid"></line>
+    <line x1="50.160004" y1="47.52" x2="50.160004" y2="52.800003" class="solid"></line>
+    <line x1="58.08" y1="63.36" x2="73.920006" y2="63.36" class="solid"></line>
+    <line x1="10.56" y1="52.800003" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="5.28" y1="63.36" x2="31.68" y2="116.16" class="solid"></line>
+    <line x1="42.24" y1="52.800003" x2="26.400002" y2="84.48" class="solid"></line>
+    <line x1="42.24" y1="52.800003" x2="52.800003" y2="73.920006" class="solid"></line>
+    <line x1="58.08" y1="63.36" x2="52.800003" y2="73.920006" class="solid"></line>
+    <line x1="52.800003" y1="73.920006" x2="68.64" y2="73.920006" class="solid"></line>
+    <line x1="73.920006" y1="63.36" x2="68.64" y2="73.920006" class="solid"></line>
+    <line x1="26.400002" y1="84.48" x2="42.24" y2="84.48" class="solid"></line>
+    <line x1="47.52" y1="73.920006" x2="42.24" y2="84.48" class="solid"></line>
+    <line x1="26.400002" y1="84.48" x2="36.960003" y2="105.600006" class="solid"></line>
+    <line x1="29.04" y1="89.76" x2="29.04" y2="95.04" class="solid"></line>
+    <line x1="42.24" y1="84.48" x2="52.800003" y2="105.600006" class="solid"></line>
+    <line x1="36.960003" y1="105.600006" x2="52.800003" y2="105.600006" class="solid"></line>
+    <line x1="36.960003" y1="105.600006" x2="31.68" y2="116.16" class="solid"></line>
+    <line x1="31.68" y1="116.16" x2="47.52" y2="116.16" class="solid"></line>
+    <line x1="52.800003" y1="105.600006" x2="47.52" y2="116.16" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="21.12" x2="23.76" y2="26.400002" class="solid"></line>
+    <line x1="23.76" y1="26.400002" x2="23.76" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="31.68" x2="18.480001" y2="36.960003" class="solid"></line>
+    <line x1="18.480001" y1="36.960003" x2="18.480001" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="31.68" y1="31.68" x2="15.84" y2="63.36" class="solid"></line>
+    <line x1="31.68" y1="31.68" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="36.960003" y1="42.24" x2="34.32" y2="47.52" class="solid"></line>
+    <line x1="34.32" y1="47.52" x2="34.32" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="63.36" x2="26.400002" y2="63.36" class="solid"></line>
+    <line x1="15.84" y1="63.36" x2="21.12" y2="73.920006" class="solid"></line>
+    <line x1="18.480001" y1="68.64" x2="18.480001" y2="73.920006" class="solid"></line>
+    <line x1="26.400002" y1="63.36" x2="23.76" y2="68.64" class="solid"></line>
+    <line x1="23.76" y1="68.64" x2="23.76" y2="95.04" class="broken"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="42.24" x2="13.200001" y2="47.52" class="solid"></line>
+    <line x1="13.200001" y1="47.52" x2="13.200001" y2="73.920006" class="broken"></line>
+  </g>
+  <g>
+    <line x1="31.68" y1="52.800003" x2="29.04" y2="58.08" class="solid"></line>
+    <line x1="29.04" y1="58.08" x2="29.04" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/3d/isometric3.flf b/static/db/contributed/3d/isometric3.flf
similarity index 100%
rename from db/contributed/3d/isometric3.flf
rename to static/db/contributed/3d/isometric3.flf
diff --git a/static/db/contributed/3d/isometric3.svg b/static/db/contributed/3d/isometric3.svg
new file mode 100644
index 0000000..18d8e9f
--- /dev/null
+++ b/static/db/contributed/3d/isometric3.svg
@@ -0,0 +1,160 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="126.72" 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="79.200005" height="126.72"></rect>
+  <text x="43.56" y="29.04" >::</text>
+  <text x="38.280003" y="39.600002" >:</text>
+  <text x="33" y="50.160004" >:</text>
+  <text x="59.4" y="50.160004" >:</text>
+  <text x="48.84" y="60.72" >:</text>
+  <text x="64.68" y="60.72" >:</text>
+  <text x="43.56" y="71.28001" >:</text>
+  <text x="33" y="81.840004" >:</text>
+  <text x="43.56" y="102.96001" >:</text>
+  <g>
+    <line x1="31.68" y1="10.56" x2="47.52" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="44.88" y2="15.84" class="solid"></line>
+    <line x1="44.88" y1="15.84" x2="44.88" y2="21.12" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="73.920006" y2="63.36" class="solid"></line>
+    <line x1="50.160004" y1="15.84" x2="50.160004" y2="21.12" class="solid"></line>
+    <line x1="55.440002" y1="26.400002" x2="55.440002" y2="52.800003" class="broken"></line>
+    <line x1="60.72" y1="36.960003" x2="60.72" y2="42.24" class="solid"></line>
+    <line x1="66" y1="47.52" x2="66" y2="52.800003" class="solid"></line>
+    <line x1="5.28" y1="63.36" x2="21.12" y2="63.36" class="solid"></line>
+    <line x1="26.400002" y1="52.800003" x2="21.12" y2="63.36" class="solid"></line>
+    <line x1="5.28" y1="63.36" x2="31.68" y2="116.16" class="solid"></line>
+    <line x1="21.12" y1="63.36" x2="47.52" y2="116.16" class="solid"></line>
+    <line x1="31.68" y1="116.16" x2="47.52" y2="116.16" class="solid"></line>
+    <line x1="58.08" y1="52.800003" x2="42.24" y2="84.48" class="solid"></line>
+    <line x1="58.08" y1="52.800003" x2="68.64" y2="73.920006" class="solid"></line>
+    <line x1="47.52" y1="73.920006" x2="68.64" y2="73.920006" class="solid"></line>
+    <line x1="73.920006" y1="63.36" x2="68.64" y2="73.920006" class="solid"></line>
+    <line x1="42.24" y1="84.48" x2="52.800003" y2="105.600006" class="solid"></line>
+    <line x1="44.88" y1="89.76" x2="44.88" y2="95.04" class="solid"></line>
+    <line x1="52.800003" y1="105.600006" x2="47.52" y2="116.16" class="solid"></line>
+  </g>
+  <g>
+    <line x1="42.24" y1="21.12" x2="39.600002" y2="26.400002" class="solid"></line>
+    <line x1="39.600002" y1="26.400002" x2="39.600002" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="36.960003" y1="31.68" x2="34.32" y2="36.960003" class="solid"></line>
+    <line x1="34.32" y1="36.960003" x2="34.32" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="47.52" y1="31.68" x2="31.68" y2="63.36" class="solid"></line>
+    <line x1="47.52" y1="31.68" x2="52.800003" y2="42.24" class="solid"></line>
+    <line x1="39.600002" y1="47.52" x2="50.160004" y2="47.52" class="broken"></line>
+    <line x1="52.800003" y1="42.24" x2="50.160004" y2="47.52" class="solid"></line>
+    <line x1="50.160004" y1="47.52" x2="50.160004" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="63.36" x2="36.960003" y2="73.920006" class="solid"></line>
+    <line x1="34.32" y1="68.64" x2="34.32" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="31.68" y1="42.24" x2="29.04" y2="47.52" class="solid"></line>
+    <line x1="29.04" y1="47.52" x2="29.04" y2="73.920006" class="broken"></line>
+  </g>
+  <g>
+    <line x1="47.52" y1="52.800003" x2="44.88" y2="58.08" class="solid"></line>
+    <line x1="44.88" y1="58.08" x2="44.88" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <line x1="42.24" y1="63.36" x2="39.600002" y2="68.64" class="solid"></line>
+    <line x1="39.600002" y1="68.64" x2="39.600002" y2="95.04" class="broken"></line>
+  </g>
+</svg>
diff --git a/db/contributed/3d/isometric4.flf b/static/db/contributed/3d/isometric4.flf
similarity index 100%
rename from db/contributed/3d/isometric4.flf
rename to static/db/contributed/3d/isometric4.flf
diff --git a/static/db/contributed/3d/isometric4.svg b/static/db/contributed/3d/isometric4.svg
new file mode 100644
index 0000000..1029029
--- /dev/null
+++ b/static/db/contributed/3d/isometric4.svg
@@ -0,0 +1,160 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="126.72" 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="79.200005" height="126.72"></rect>
+  <text x="43.56" y="29.04" >::</text>
+  <text x="54.120003" y="39.600002" >:</text>
+  <text x="33" y="50.160004" >:</text>
+  <text x="59.4" y="50.160004" >:</text>
+  <text x="27.720001" y="60.72" >:</text>
+  <text x="43.56" y="60.72" >:</text>
+  <text x="48.84" y="71.28001" >:</text>
+  <text x="59.4" y="81.840004" >:</text>
+  <text x="48.84" y="102.96001" >:</text>
+  <g>
+    <line x1="31.68" y1="10.56" x2="47.52" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="44.88" y2="15.84" class="solid"></line>
+    <line x1="44.88" y1="15.84" x2="44.88" y2="21.12" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="73.920006" y2="63.36" class="solid"></line>
+    <line x1="50.160004" y1="15.84" x2="50.160004" y2="21.12" class="solid"></line>
+    <line x1="55.440002" y1="26.400002" x2="55.440002" y2="31.68" class="solid"></line>
+    <line x1="60.72" y1="36.960003" x2="60.72" y2="42.24" class="solid"></line>
+    <line x1="66" y1="47.52" x2="66" y2="73.920006" class="broken"></line>
+    <line x1="5.28" y1="63.36" x2="21.12" y2="63.36" class="solid"></line>
+    <line x1="26.400002" y1="52.800003" x2="21.12" y2="63.36" class="solid"></line>
+    <line x1="5.28" y1="63.36" x2="10.56" y2="73.920006" class="solid"></line>
+    <line x1="73.920006" y1="63.36" x2="47.52" y2="116.16" class="solid"></line>
+    <line x1="36.960003" y1="52.800003" x2="26.400002" y2="73.920006" class="solid"></line>
+    <line x1="36.960003" y1="52.800003" x2="52.800003" y2="84.48" class="solid"></line>
+    <line x1="10.56" y1="73.920006" x2="26.400002" y2="73.920006" class="solid"></line>
+    <line x1="21.12" y1="63.36" x2="26.400002" y2="73.920006" class="solid"></line>
+    <line x1="31.68" y1="73.920006" x2="36.960003" y2="84.48" class="solid"></line>
+    <line x1="36.960003" y1="84.48" x2="52.800003" y2="84.48" class="solid"></line>
+    <line x1="36.960003" y1="84.48" x2="26.400002" y2="105.600006" class="solid"></line>
+    <line x1="52.800003" y1="84.48" x2="50.160004" y2="89.76" class="solid"></line>
+    <line x1="50.160004" y1="89.76" x2="50.160004" y2="95.04" class="solid"></line>
+    <line x1="26.400002" y1="105.600006" x2="42.24" y2="105.600006" class="solid"></line>
+    <line x1="47.52" y1="95.04" x2="42.24" y2="105.600006" class="solid"></line>
+    <line x1="26.400002" y1="105.600006" x2="31.68" y2="116.16" class="solid"></line>
+    <line x1="31.68" y1="116.16" x2="47.52" y2="116.16" class="solid"></line>
+    <line x1="42.24" y1="105.600006" x2="47.52" y2="116.16" class="solid"></line>
+  </g>
+  <g>
+    <line x1="42.24" y1="21.12" x2="39.600002" y2="26.400002" class="solid"></line>
+    <line x1="39.600002" y1="26.400002" x2="39.600002" y2="52.800003" class="broken"></line>
+  </g>
+  <g>
+    <line x1="36.960003" y1="31.68" x2="34.32" y2="36.960003" class="solid"></line>
+    <line x1="34.32" y1="36.960003" x2="34.32" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="47.52" y1="31.68" x2="42.24" y2="42.24" class="solid"></line>
+    <line x1="47.52" y1="31.68" x2="63.36" y2="63.36" class="solid"></line>
+    <line x1="42.24" y1="42.24" x2="58.08" y2="73.920006" class="solid"></line>
+    <line x1="44.88" y1="47.52" x2="44.88" y2="52.800003" class="solid"></line>
+    <line x1="50.160004" y1="58.08" x2="50.160004" y2="63.36" class="solid"></line>
+    <line x1="52.800003" y1="63.36" x2="63.36" y2="63.36" class="solid"></line>
+    <line x1="55.440002" y1="68.64" x2="55.440002" y2="95.04" class="broken"></line>
+    <line x1="63.36" y1="63.36" x2="60.72" y2="68.64" class="solid"></line>
+    <line x1="60.72" y1="68.64" x2="60.72" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="31.68" y1="42.24" x2="29.04" y2="47.52" class="solid"></line>
+    <line x1="29.04" y1="47.52" x2="29.04" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/3d/larry3d.flf b/static/db/contributed/3d/larry3d.flf
similarity index 100%
rename from db/contributed/3d/larry3d.flf
rename to static/db/contributed/3d/larry3d.flf
diff --git a/static/db/contributed/3d/larry3d.svg b/static/db/contributed/3d/larry3d.svg
new file mode 100644
index 0000000..ae4aab3
--- /dev/null
+++ b/static/db/contributed/3d/larry3d.svg
@@ -0,0 +1,124 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="68.64" height="84.48" 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="68.64" height="84.48"></rect>
+  <text x="27.720001" y="29.04" >L</text>
+  <line x1="31.68" y1="21.12" x2="36.960003" y2="31.68" class="solid"></line>
+  <g>
+    <line x1="5.28" y1="10.56" x2="36.960003" y2="10.56" class="solid"></line>
+    <line x1="5.28" y1="10.56" x2="0" y2="21.12" class="solid"></line>
+    <line x1="5.28" y1="10.56" x2="31.68" y2="63.36" class="solid"></line>
+    <line x1="36.960003" y1="10.56" x2="63.36" y2="63.36" class="solid"></line>
+    <line x1="0" y1="21.12" x2="26.400002" y2="73.920006" class="solid"></line>
+    <line x1="31.68" y1="42.24" x2="42.24" y2="42.24" class="solid"></line>
+    <line x1="31.68" y1="42.24" x2="47.52" y2="73.920006" class="solid"></line>
+    <line x1="42.24" y1="42.24" x2="36.960003" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="42.24" x2="52.800003" y2="63.36" class="solid"></line>
+    <line x1="31.68" y1="63.36" x2="42.24" y2="63.36" class="solid"></line>
+    <line x1="52.800003" y1="63.36" x2="63.36" y2="63.36" class="solid"></line>
+    <line x1="31.68" y1="63.36" x2="26.400002" y2="73.920006" class="solid"></line>
+    <line x1="26.400002" y1="73.920006" x2="36.960003" y2="73.920006" class="solid"></line>
+    <line x1="42.24" y1="63.36" x2="36.960003" y2="73.920006" class="solid"></line>
+    <line x1="52.800003" y1="63.36" x2="47.52" y2="73.920006" class="solid"></line>
+    <line x1="47.52" y1="73.920006" x2="58.08" y2="73.920006" class="solid"></line>
+    <line x1="63.36" y1="63.36" x2="58.08" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/3d/smisome1.flf b/static/db/contributed/3d/smisome1.flf
similarity index 100%
rename from db/contributed/3d/smisome1.flf
rename to static/db/contributed/3d/smisome1.flf
diff --git a/static/db/contributed/3d/smisome1.svg b/static/db/contributed/3d/smisome1.svg
new file mode 100644
index 0000000..f75219e
--- /dev/null
+++ b/static/db/contributed/3d/smisome1.svg
@@ -0,0 +1,128 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="84.48" 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="58.08" height="84.48"></rect>
+  <text x="22.44" y="29.04" >:</text>
+  <text x="11.88" y="39.600002" >:</text>
+  <g>
+    <line x1="21.12" y1="10.56" x2="36.960003" y2="10.56" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="18.480001" y2="15.84" class="solid"></line>
+    <line x1="18.480001" y1="15.84" x2="18.480001" y2="42.24" class="broken"></line>
+    <line x1="21.12" y1="10.56" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="15.84" x2="23.76" y2="21.12" class="solid"></line>
+    <line x1="36.960003" y1="10.56" x2="52.800003" y2="42.24" class="solid"></line>
+    <line x1="29.04" y1="26.400002" x2="29.04" y2="52.800003" class="broken"></line>
+    <line x1="36.960003" y1="42.24" x2="52.800003" y2="42.24" class="solid"></line>
+    <line x1="36.960003" y1="42.24" x2="21.12" y2="73.920006" class="solid"></line>
+    <line x1="52.800003" y1="42.24" x2="36.960003" y2="73.920006" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="5.28" y1="42.24" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="52.800003" x2="15.84" y2="63.36" class="solid"></line>
+    <line x1="15.84" y1="63.36" x2="21.12" y2="73.920006" class="solid"></line>
+    <line x1="21.12" y1="73.920006" x2="36.960003" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="21.12" x2="13.200001" y2="26.400002" class="solid"></line>
+    <line x1="13.200001" y1="26.400002" x2="13.200001" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="36.960003" x2="23.76" y2="63.36" class="broken"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/avatar.flf b/static/db/contributed/block/avatar.flf
similarity index 100%
rename from db/contributed/block/avatar.flf
rename to static/db/contributed/block/avatar.flf
diff --git a/static/db/contributed/block/avatar.svg b/static/db/contributed/block/avatar.svg
new file mode 100644
index 0000000..d389691
--- /dev/null
+++ b/static/db/contributed/block/avatar.svg
@@ -0,0 +1,122 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="63.36" 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="36.960003" height="63.36"></rect>
+  <text x="27.720001" y="39.600002" >|</text>
+  <line x1="21.12" y1="42.24" x2="26.400002" y2="52.800003" class="solid"></line>
+  <line x1="29.04" y1="42.24" x2="29.04" y2="52.800003" class="solid"></line>
+  <g>
+    <line x1="5.28" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="5.28" y1="10.56" x2="2.64" y2="15.84" class="solid"></line>
+    <line x1="2.64" y1="15.84" x2="2.64" y2="42.24" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="29.04" y2="15.84" class="solid"></line>
+    <line x1="29.04" y1="15.84" x2="29.04" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="21.12" x2="21.12" y2="21.12" class="solid"></line>
+    <line x1="15.84" y1="21.12" x2="13.200001" y2="26.400002" class="solid"></line>
+    <line x1="13.200001" y1="26.400002" x2="13.200001" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="23.76" y2="26.400002" class="solid"></line>
+    <line x1="23.76" y1="26.400002" x2="23.76" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="36.960003" x2="23.76" y2="36.960003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="0" y1="42.24" x2="5.28" y2="52.800003" class="solid"></line>
+    <line x1="5.28" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="10.56" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/bulbhead.flf b/static/db/contributed/block/bulbhead.flf
similarity index 100%
rename from db/contributed/block/bulbhead.flf
rename to static/db/contributed/block/bulbhead.flf
diff --git a/static/db/contributed/block/bulbhead.svg b/static/db/contributed/block/bulbhead.svg
new file mode 100644
index 0000000..2dc1db0
--- /dev/null
+++ b/static/db/contributed/block/bulbhead.svg
@@ -0,0 +1,114 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="52.800003" 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="47.52" height="52.800003"></rect>
+  <g>
+    <line x1="15.84" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="5.28" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="21.12" x2="31.68" y2="21.12" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="36.960003" y2="31.68" class="solid"></line>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,0 5.28,42.24" class="nofill"></path>
+    <line x1="5.28" y1="42.24" x2="15.84" y2="42.24" class="solid"></line>
+    <path d="M 15.84,21.12 A 10.56,10.56 0,0,0 15.84,31.68" class="nofill"></path>
+    <line x1="15.84" y1="31.68" x2="26.400002" y2="31.68" class="solid"></line>
+    <path d="M 26.400002,21.12 A 10.56,10.56 0,0,1 26.400002,31.68" class="nofill"></path>
+    <path d="M 15.84,31.68 A 10.56,10.56 0,0,1 15.84,42.24" class="nofill"></path>
+    <path d="M 26.400002,31.68 A 10.56,10.56 0,0,0 26.400002,42.24" class="nofill"></path>
+    <line x1="26.400002" y1="42.24" x2="36.960003" y2="42.24" class="solid"></line>
+    <path d="M 36.960003,31.68 A 10.56,10.56 0,0,1 36.960003,42.24" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/contributed/block/chunky.flf b/static/db/contributed/block/chunky.flf
similarity index 100%
rename from db/contributed/block/chunky.flf
rename to static/db/contributed/block/chunky.flf
diff --git a/static/db/contributed/block/chunky.svg b/static/db/contributed/block/chunky.svg
new file mode 100644
index 0000000..fb69b8f
--- /dev/null
+++ b/static/db/contributed/block/chunky.svg
@@ -0,0 +1,107 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="52.800003" 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="52.800003" height="52.800003"></rect>
+  <line x1="21.12" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+  <g>
+    <line x1="2.64" y1="10.56" x2="44.88" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="10.56" x2="2.64" y2="42.24" class="solid"></line>
+    <line x1="44.88" y1="10.56" x2="44.88" y2="42.24" class="solid"></line>
+    <line x1="2.64" y1="42.24" x2="44.88" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="31.68" x2="23.76" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/crawford.flf b/static/db/contributed/block/crawford.flf
similarity index 100%
rename from db/contributed/block/crawford.flf
rename to static/db/contributed/block/crawford.flf
diff --git a/static/db/contributed/block/crawford.svg b/static/db/contributed/block/crawford.svg
new file mode 100644
index 0000000..51ee988
--- /dev/null
+++ b/static/db/contributed/block/crawford.svg
@@ -0,0 +1,117 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="84.48" 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="42.24" height="84.48"></rect>
+  <text x="33" y="18.480001" >T</text>
+  <text x="1.32" y="29.04" >Y</text>
+  <line x1="34.32" y1="21.12" x2="34.32" y2="63.36" class="solid"></line>
+  <line x1="2.64" y1="31.68" x2="2.64" y2="63.36" class="solid"></line>
+  <text x="1.32" y="71.28001" >l</text>
+  <line x1="5.28" y1="73.920006" x2="15.84" y2="73.920006" class="solid"></line>
+  <text x="17.16" y="71.28001" >j</text>
+  <line x1="21.12" y1="73.920006" x2="31.68" y2="73.920006" class="solid"></line>
+  <text x="33" y="71.28001" >j</text>
+  <text x="17.16" y="29.04" >o</text>
+  <g>
+    <line x1="10.56" y1="10.56" x2="31.68" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="52.800003" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="18.480001" y1="52.800003" x2="18.480001" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/cricket.flf b/static/db/contributed/block/cricket.flf
similarity index 100%
rename from db/contributed/block/cricket.flf
rename to static/db/contributed/block/cricket.flf
diff --git a/static/db/contributed/block/cricket.svg b/static/db/contributed/block/cricket.svg
new file mode 100644
index 0000000..04f609e
--- /dev/null
+++ b/static/db/contributed/block/cricket.svg
@@ -0,0 +1,118 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="84.48" 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="52.800003" height="84.48"></rect>
+  <line x1="21.12" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+  <text x="6.6000004" y="29.04" >.</text>
+  <text x="22.44" y="29.04" >1</text>
+  <line x1="7.92" y1="39.600002" x2="7.92" y2="63.36" class="broken"></line>
+  <text x="11.88" y="60.72" >:.</text>
+  <text x="27.720001" y="60.72" >:.</text>
+  <g>
+    <line x1="2.64" y1="10.56" x2="44.88" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="10.56" x2="2.64" y2="66" class="solid"></line>
+    <line x1="44.88" y1="10.56" x2="44.88" y2="66" class="solid"></line>
+    <path d="M 2.64,66 A 2.64,2.64 0,0,0 5.28,68.64" class="nofill"></path>
+    <line x1="5.28" y1="68.64" x2="21.12" y2="68.64" class="solid"></line>
+    <line x1="26.400002" y1="68.64" x2="42.24" y2="68.64" class="solid"></line>
+    <path d="M 44.88,66 A 2.64,2.64 0,0,1 42.24,68.64" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="42.24" x2="23.76" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/doom.flf b/static/db/contributed/block/doom.flf
similarity index 100%
rename from db/contributed/block/doom.flf
rename to static/db/contributed/block/doom.flf
diff --git a/static/db/contributed/block/doom.svg b/static/db/contributed/block/doom.svg
new file mode 100644
index 0000000..ff4f65e
--- /dev/null
+++ b/static/db/contributed/block/doom.svg
@@ -0,0 +1,121 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="73.920006" 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="42.24" height="73.920006"></rect>
+  <g>
+    <line x1="10.56" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="2.64" y2="26.400002" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="34.32" y2="26.400002" class="solid"></line>
+    <line x1="2.64" y1="26.400002" x2="2.64" y2="52.800003" class="solid"></line>
+    <line x1="34.32" y1="26.400002" x2="34.32" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="21.12" x2="21.12" y2="21.12" class="solid"></line>
+    <line x1="15.84" y1="21.12" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="13.200001" y1="42.24" x2="23.76" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="42.24" x2="13.200001" y2="63.36" class="solid"></line>
+    <line x1="23.76" y1="42.24" x2="23.76" y2="63.36" class="solid"></line>
+    <line x1="23.76" y1="63.36" x2="31.68" y2="63.36" class="solid"></line>
+    <line x1="36.960003" y1="52.800003" x2="31.68" y2="63.36" class="solid"></line>
+    <line x1="0" y1="52.800003" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="5.28" y1="63.36" x2="13.200001" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/drpepper.flf b/static/db/contributed/block/drpepper.flf
similarity index 100%
rename from db/contributed/block/drpepper.flf
rename to static/db/contributed/block/drpepper.flf
diff --git a/static/db/contributed/block/drpepper.svg b/static/db/contributed/block/drpepper.svg
new file mode 100644
index 0000000..7663374
--- /dev/null
+++ b/static/db/contributed/block/drpepper.svg
@@ -0,0 +1,107 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="52.800003" 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="31.68" height="52.800003"></rect>
+  <text x="11.88" y="18.480001" >.</text>
+  <g>
+    <line x1="2.64" y1="10.56" x2="23.76" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="10.56" x2="2.64" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="10.56" x2="23.76" y2="42.24" class="solid"></line>
+    <line x1="2.64" y1="42.24" x2="23.76" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="31.68" x2="13.200001" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/eftirobot.flf b/static/db/contributed/block/eftirobot.flf
similarity index 100%
rename from db/contributed/block/eftirobot.flf
rename to static/db/contributed/block/eftirobot.flf
diff --git a/static/db/contributed/block/eftirobot.svg b/static/db/contributed/block/eftirobot.svg
new file mode 100644
index 0000000..c1d7db3
--- /dev/null
+++ b/static/db/contributed/block/eftirobot.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="63.36" 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="36.960003" height="63.36"></rect>
+  <text x="11.88" y="29.04" >o</text>
+  <g>
+    <line x1="10.56" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <path d="M 10.56,10.56 A 10.56,10.56 0,0,0 10.56,21.12" class="nofill"></path>
+    <path d="M 21.12,10.56 A 10.56,10.56 0,0,1 21.12,21.12" class="nofill"></path>
+    <line x1="10.56" y1="21.12" x2="5.28" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,0 5.28,42.24" class="nofill"></path>
+    <path d="M 26.400002,31.68 A 10.56,10.56 0,0,1 26.400002,42.24" class="nofill"></path>
+    <line x1="5.28" y1="42.24" x2="0" y2="52.800003" class="solid"></line>
+    <line x1="0" y1="52.800003" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="10.56" y1="42.24" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/epic.flf b/static/db/contributed/block/epic.flf
similarity index 100%
rename from db/contributed/block/epic.flf
rename to static/db/contributed/block/epic.flf
diff --git a/static/db/contributed/block/epic.svg b/static/db/contributed/block/epic.svg
new file mode 100644
index 0000000..c473436
--- /dev/null
+++ b/static/db/contributed/block/epic.svg
@@ -0,0 +1,127 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="95.04" 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="52.800003" height="95.04"></rect>
+  <line x1="5.28" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+  <text x="43.56" y="18.480001" >)</text>
+  <line x1="44.88" y1="21.12" x2="44.88" y2="84.48" class="solid"></line>
+  <g>
+    <path d="M 2.64,10.56 A 7.92,7.92 0,0,0 2.64,21.12" class="nofill"></path>
+    <line x1="2.64" y1="21.12" x2="2.64" y2="84.48" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="21.12" x2="31.68" y2="21.12" class="solid"></line>
+    <path d="M 15.84,21.12 A 10.56,10.56 0,0,0 15.84,31.68" class="nofill"></path>
+    <path d="M 31.68,21.12 A 10.56,10.56 0,0,1 31.68,31.68" class="nofill"></path>
+    <path d="M 15.84,31.68 A 10.56,10.56 0,0,0 15.84,42.24" class="nofill"></path>
+    <line x1="15.84" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <path d="M 31.68,31.68 A 10.56,10.56 0,0,1 31.68,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="15.84" y1="52.800003" x2="31.68" y2="52.800003" class="solid"></line>
+    <path d="M 15.84,52.800003 A 10.56,10.56 0,0,0 15.84,63.36" class="nofill"></path>
+    <path d="M 31.68,52.800003 A 10.56,10.56 0,0,1 31.68,63.36" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 10.56,63.36 A 10.56,10.56 0,0,1 10.56,73.920006" class="nofill"></path>
+    <line x1="10.56" y1="73.920006" x2="5.28" y2="84.48" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 36.960003,63.36 A 10.56,10.56 0,0,0 36.960003,73.920006" class="nofill"></path>
+    <line x1="36.960003" y1="73.920006" x2="42.24" y2="84.48" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/graceful.flf b/static/db/contributed/block/graceful.flf
similarity index 100%
rename from db/contributed/block/graceful.flf
rename to static/db/contributed/block/graceful.flf
diff --git a/static/db/contributed/block/graceful.svg b/static/db/contributed/block/graceful.svg
new file mode 100644
index 0000000..e0d1129
--- /dev/null
+++ b/static/db/contributed/block/graceful.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="52.800003" 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="36.960003" height="52.800003"></rect>
+  <g>
+    <line x1="10.56" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="0" y2="31.68" class="solid"></line>
+    <line x1="0" y1="31.68" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="5.28" y1="42.24" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="31.68" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="31.68" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="31.68" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/graffiti.flf b/static/db/contributed/block/graffiti.flf
similarity index 100%
rename from db/contributed/block/graffiti.flf
rename to static/db/contributed/block/graffiti.flf
diff --git a/static/db/contributed/block/graffiti.svg b/static/db/contributed/block/graffiti.svg
new file mode 100644
index 0000000..85f94f1
--- /dev/null
+++ b/static/db/contributed/block/graffiti.svg
@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="73.920006" 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="63.36" height="73.920006"></rect>
+  <g>
+    <line x1="15.84" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="0" y2="42.24" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="58.08" y2="42.24" class="solid"></line>
+    <line x1="0" y1="42.24" x2="5.28" y2="52.800003" class="solid"></line>
+    <line x1="58.08" y1="42.24" x2="47.52" y2="63.36" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="31.68" y2="21.12" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="36.960003" y2="31.68" class="solid"></line>
+    <line x1="31.68" y1="21.12" x2="36.960003" y2="31.68" class="solid"></line>
+    <line x1="29.04" y1="31.68" x2="29.04" y2="52.800003" class="solid"></line>
+    <line x1="5.28" y1="52.800003" x2="42.24" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="52.800003" x2="47.52" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/linux.flf b/static/db/contributed/block/linux.flf
similarity index 100%
rename from db/contributed/block/linux.flf
rename to static/db/contributed/block/linux.flf
diff --git a/static/db/contributed/block/linux.svg b/static/db/contributed/block/linux.svg
new file mode 100644
index 0000000..de745c9
--- /dev/null
+++ b/static/db/contributed/block/linux.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="42.24" 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="31.68" height="42.24"></rect>
+  <g>
+    <path d="M 5.28,5.28 A 2.64,2.64 0,0,0 2.64,7.92" class="nofill"></path>
+    <line x1="2.64" y1="7.92" x2="2.64" y2="23.76" class="solid"></line>
+    <line x1="5.28" y1="5.28" x2="21.12" y2="5.28" class="solid"></line>
+    <path d="M 21.12,5.28 A 2.64,2.64 0,0,1 23.76,7.92" class="nofill"></path>
+    <line x1="23.76" y1="7.92" x2="23.76" y2="23.76" class="solid"></line>
+    <path d="M 2.64,23.76 A 2.64,2.64 0,0,0 5.28,26.400002" class="nofill"></path>
+    <line x1="5.28" y1="26.400002" x2="10.56" y2="26.400002" class="solid"></line>
+    <line x1="15.84" y1="26.400002" x2="21.12" y2="26.400002" class="solid"></line>
+    <path d="M 23.76,23.76 A 2.64,2.64 0,0,1 21.12,26.400002" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="13.200001" y1="10.56" x2="13.200001" y2="21.12" class="solid"></line>
+    <line x1="13.200001" y1="21.12" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="13.200001" y1="21.12" x2="15.84" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/ogre.flf b/static/db/contributed/block/ogre.flf
similarity index 100%
rename from db/contributed/block/ogre.flf
rename to static/db/contributed/block/ogre.flf
diff --git a/static/db/contributed/block/ogre.svg b/static/db/contributed/block/ogre.svg
new file mode 100644
index 0000000..95ccdc6
--- /dev/null
+++ b/static/db/contributed/block/ogre.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="63.36" 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="42.24" height="63.36"></rect>
+  <g>
+    <line x1="15.84" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="0" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="21.12" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="0" y1="42.24" x2="5.28" y2="52.800003" class="solid"></line>
+    <line x1="5.28" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="52.800003" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="36.960003" y1="42.24" x2="31.68" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/puffy.flf b/static/db/contributed/block/puffy.flf
similarity index 100%
rename from db/contributed/block/puffy.flf
rename to static/db/contributed/block/puffy.flf
diff --git a/static/db/contributed/block/puffy.svg b/static/db/contributed/block/puffy.svg
new file mode 100644
index 0000000..7914869
--- /dev/null
+++ b/static/db/contributed/block/puffy.svg
@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="73.920006" 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="42.24" height="73.920006"></rect>
+  <line x1="5.28" y1="10.56" x2="31.68" y2="10.56" class="solid"></line>
+  <text x="33" y="18.480001" >)</text>
+  <line x1="34.32" y1="21.12" x2="34.32" y2="52.800003" class="solid"></line>
+  <text x="1.32" y="60.72" >(</text>
+  <line x1="5.28" y1="63.36" x2="10.56" y2="63.36" class="solid"></line>
+  <text x="11.88" y="60.72" >)</text>
+  <text x="22.44" y="60.72" >(</text>
+  <line x1="26.400002" y1="63.36" x2="31.68" y2="63.36" class="solid"></line>
+  <text x="33" y="60.72" >)</text>
+  <g>
+    <path d="M 2.64,10.56 A 7.92,7.92 0,0,0 2.64,21.12" class="nofill"></path>
+    <line x1="2.64" y1="21.12" x2="2.64" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="21.12" x2="21.12" y2="21.12" class="solid"></line>
+    <path d="M 15.84,21.12 A 10.56,10.56 0,0,0 15.84,31.68" class="nofill"></path>
+    <line x1="15.84" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+    <path d="M 21.12,21.12 A 10.56,10.56 0,0,1 21.12,31.68" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="13.200001" y1="42.24" x2="23.76" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="42.24" x2="13.200001" y2="52.800003" class="solid"></line>
+    <line x1="23.76" y1="42.24" x2="23.76" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/rectangles.flf b/static/db/contributed/block/rectangles.flf
similarity index 100%
rename from db/contributed/block/rectangles.flf
rename to static/db/contributed/block/rectangles.flf
diff --git a/static/db/contributed/block/rectangles.svg b/static/db/contributed/block/rectangles.svg
new file mode 100644
index 0000000..6f00a48
--- /dev/null
+++ b/static/db/contributed/block/rectangles.svg
@@ -0,0 +1,107 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="63.36" 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="42.24" height="63.36"></rect>
+  <line x1="15.84" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+  <g>
+    <line x1="2.64" y1="21.12" x2="34.32" y2="21.12" class="solid"></line>
+    <line x1="2.64" y1="21.12" x2="2.64" y2="52.800003" class="solid"></line>
+    <line x1="34.32" y1="21.12" x2="34.32" y2="52.800003" class="solid"></line>
+    <line x1="2.64" y1="52.800003" x2="34.32" y2="52.800003" class="solid"></line>
+    <line x1="18.480001" y1="42.24" x2="18.480001" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/rounded.flf b/static/db/contributed/block/rounded.flf
similarity index 100%
rename from db/contributed/block/rounded.flf
rename to static/db/contributed/block/rounded.flf
diff --git a/static/db/contributed/block/rounded.svg b/static/db/contributed/block/rounded.svg
new file mode 100644
index 0000000..188703b
--- /dev/null
+++ b/static/db/contributed/block/rounded.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="73.920006" 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="52.800003" height="73.920006"></rect>
+  <g>
+    <line x1="5.28" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+    <path d="M 5.28,10.56 A 10.56,10.56 0,0,0 5.28,21.12" class="nofill"></path>
+    <line x1="5.28" y1="21.12" x2="42.24" y2="21.12" class="solid"></line>
+    <path d="M 42.24,10.56 A 10.56,10.56 0,0,1 42.24,21.12" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="2.64" y1="31.68" x2="44.88" y2="31.68" class="solid"></line>
+    <line x1="2.64" y1="31.68" x2="2.64" y2="63.36" class="solid"></line>
+    <line x1="44.88" y1="31.68" x2="44.88" y2="63.36" class="solid"></line>
+    <line x1="13.200001" y1="42.24" x2="34.32" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="42.24" x2="13.200001" y2="63.36" class="solid"></line>
+    <line x1="34.32" y1="42.24" x2="34.32" y2="63.36" class="solid"></line>
+    <line x1="2.64" y1="63.36" x2="13.200001" y2="63.36" class="solid"></line>
+    <line x1="34.32" y1="63.36" x2="44.88" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/serifcap.flf b/static/db/contributed/block/serifcap.flf
similarity index 100%
rename from db/contributed/block/serifcap.flf
rename to static/db/contributed/block/serifcap.flf
diff --git a/static/db/contributed/block/serifcap.svg b/static/db/contributed/block/serifcap.svg
new file mode 100644
index 0000000..c7027d0
--- /dev/null
+++ b/static/db/contributed/block/serifcap.svg
@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="52.800003" 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="36.960003" height="52.800003"></rect>
+  <g>
+    <line x1="10.56" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <path d="M 10.56,10.56 A 10.56,10.56 0,0,0 10.56,21.12" class="nofill"></path>
+    <path d="M 21.12,10.56 A 10.56,10.56 0,0,1 21.12,21.12" class="nofill"></path>
+    <line x1="10.56" y1="21.12" x2="5.28" y2="31.68" class="solid"></line>
+    <line x1="5.28" y1="31.68" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,0 5.28,42.24" class="nofill"></path>
+    <line x1="5.28" y1="42.24" x2="10.56" y2="42.24" class="solid"></line>
+    <path d="M 10.56,31.68 A 10.56,10.56 0,0,1 10.56,42.24" class="nofill"></path>
+    <path d="M 21.12,31.68 A 10.56,10.56 0,0,0 21.12,42.24" class="nofill"></path>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="42.24" class="solid"></line>
+    <path d="M 26.400002,31.68 A 10.56,10.56 0,0,1 26.400002,42.24" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/contributed/block/stacey.flf b/static/db/contributed/block/stacey.flf
similarity index 100%
rename from db/contributed/block/stacey.flf
rename to static/db/contributed/block/stacey.flf
diff --git a/static/db/contributed/block/stacey.svg b/static/db/contributed/block/stacey.svg
new file mode 100644
index 0000000..43b7824
--- /dev/null
+++ b/static/db/contributed/block/stacey.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="73.920006" 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="42.24" height="73.920006"></rect>
+  <line x1="0" y1="10.56" x2="36.960003" y2="10.56" class="solid"></line>
+  <text x="1.32" y="18.480001" >7</text>
+  <line x1="15.84" y1="21.12" x2="21.12" y2="21.12" class="solid"></line>
+  <text x="33" y="18.480001" >7</text>
+  <line x1="2.64" y1="21.12" x2="2.64" y2="63.36" class="broken"></line>
+  <line x1="15.84" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+  <line x1="34.32" y1="21.12" x2="34.32" y2="63.36" class="broken"></line>
+  <text x="17.16" y="39.600002" >7</text>
+  <line x1="18.480001" y1="42.24" x2="18.480001" y2="63.36" class="broken"></line>
+  <line x1="5.28" y1="63.36" x2="15.84" y2="63.36" class="solid"></line>
+  <line x1="21.12" y1="63.36" x2="31.68" y2="63.36" class="solid"></line>
+</svg>
diff --git a/db/contributed/block/starwars.flf b/static/db/contributed/block/starwars.flf
similarity index 100%
rename from db/contributed/block/starwars.flf
rename to static/db/contributed/block/starwars.flf
diff --git a/static/db/contributed/block/starwars.svg b/static/db/contributed/block/starwars.svg
new file mode 100644
index 0000000..0b92025
--- /dev/null
+++ b/static/db/contributed/block/starwars.svg
@@ -0,0 +1,116 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="73.920006" height="73.920006" 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="73.920006" height="73.920006"></rect>
+  <g>
+    <line x1="26.400002" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="0" y2="63.36" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="68.64" y2="63.36" class="solid"></line>
+    <line x1="0" y1="63.36" x2="15.84" y2="63.36" class="solid"></line>
+    <line x1="21.12" y1="52.800003" x2="47.52" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="52.800003" x2="15.84" y2="63.36" class="solid"></line>
+    <line x1="47.52" y1="52.800003" x2="52.800003" y2="63.36" class="solid"></line>
+    <line x1="52.800003" y1="63.36" x2="68.64" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <line x1="34.32" y1="21.12" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="34.32" y1="21.12" x2="36.960003" y2="31.68" class="solid"></line>
+    <line x1="31.68" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="42.24" y2="42.24" class="solid"></line>
+    <line x1="36.960003" y1="31.68" x2="42.24" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/block/stop.flf b/static/db/contributed/block/stop.flf
similarity index 100%
rename from db/contributed/block/stop.flf
rename to static/db/contributed/block/stop.flf
diff --git a/static/db/contributed/block/stop.svg b/static/db/contributed/block/stop.svg
new file mode 100644
index 0000000..9ef7e4c
--- /dev/null
+++ b/static/db/contributed/block/stop.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="73.920006" 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="47.52" height="73.920006"></rect>
+  <text x="1.32" y="50.160004" >|</text>
+  <line x1="13.200001" y1="52.800003" x2="29.04" y2="52.800003" class="solid"></line>
+  <text x="38.280003" y="50.160004" >|</text>
+  <g>
+    <line x1="21.12" y1="10.56" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="36.960003" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="31.68" x2="15.84" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="2.64" y1="52.800003" x2="2.64" y2="63.36" class="solid"></line>
+    <line x1="2.64" y1="63.36" x2="39.600002" y2="63.36" class="solid"></line>
+    <line x1="39.600002" y1="52.800003" x2="39.600002" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/code/binary.flf b/static/db/contributed/code/binary.flf
similarity index 100%
rename from db/contributed/code/binary.flf
rename to static/db/contributed/code/binary.flf
diff --git a/db/contributed/code/decimal.flf b/static/db/contributed/code/decimal.flf
similarity index 100%
rename from db/contributed/code/decimal.flf
rename to static/db/contributed/code/decimal.flf
diff --git a/db/contributed/code/dwhistled.flf b/static/db/contributed/code/dwhistled.flf
similarity index 100%
rename from db/contributed/code/dwhistled.flf
rename to static/db/contributed/code/dwhistled.flf
diff --git a/db/contributed/code/hex.flf b/static/db/contributed/code/hex.flf
similarity index 100%
rename from db/contributed/code/hex.flf
rename to static/db/contributed/code/hex.flf
diff --git a/db/contributed/code/l4me.flf b/static/db/contributed/code/l4me.flf
similarity index 100%
rename from db/contributed/code/l4me.flf
rename to static/db/contributed/code/l4me.flf
diff --git a/db/contributed/code/octal.flf b/static/db/contributed/code/octal.flf
similarity index 100%
rename from db/contributed/code/octal.flf
rename to static/db/contributed/code/octal.flf
diff --git a/db/contributed/code/rot13.flf b/static/db/contributed/code/rot13.flf
similarity index 100%
rename from db/contributed/code/rot13.flf
rename to static/db/contributed/code/rot13.flf
diff --git a/db/contributed/dingbat/eftichess.flf b/static/db/contributed/dingbat/eftichess.flf
similarity index 100%
rename from db/contributed/dingbat/eftichess.flf
rename to static/db/contributed/dingbat/eftichess.flf
diff --git a/db/contributed/dingbat/eftiwall-chart.txt b/static/db/contributed/dingbat/eftiwall-chart.txt
similarity index 100%
rename from db/contributed/dingbat/eftiwall-chart.txt
rename to static/db/contributed/dingbat/eftiwall-chart.txt
diff --git a/db/contributed/dingbat/eftiwall.flf b/static/db/contributed/dingbat/eftiwall.flf
similarity index 100%
rename from db/contributed/dingbat/eftiwall.flf
rename to static/db/contributed/dingbat/eftiwall.flf
diff --git a/db/contributed/dingbat/eftiwall.txt b/static/db/contributed/dingbat/eftiwall.txt
similarity index 100%
rename from db/contributed/dingbat/eftiwall.txt
rename to static/db/contributed/dingbat/eftiwall.txt
diff --git a/db/contributed/directions/mirror.flf b/static/db/contributed/directions/mirror.flf
similarity index 100%
rename from db/contributed/directions/mirror.flf
rename to static/db/contributed/directions/mirror.flf
diff --git a/db/contributed/effect/acrobatic.flf b/static/db/contributed/effect/acrobatic.flf
similarity index 100%
rename from db/contributed/effect/acrobatic.flf
rename to static/db/contributed/effect/acrobatic.flf
diff --git a/static/db/contributed/effect/acrobatic.svg b/static/db/contributed/effect/acrobatic.svg
new file mode 100644
index 0000000..3029177
--- /dev/null
+++ b/static/db/contributed/effect/acrobatic.svg
@@ -0,0 +1,126 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100.32001" height="105.600006" 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="100.32001" height="105.600006"></rect>
+  <line x1="50.160004" y1="7.92" x2="50.160004" y2="5.28" class="solid end_marked_open_circle"></line>
+  <text x="43.56" y="18.480001" >&lt;</text>
+  <line x1="50.160004" y1="15.84" x2="66" y2="36.960003" class="solid end_marked_open_circle"></line>
+  <text x="54.120003" y="18.480001" >&gt;</text>
+  <line x1="34.32" y1="39.600002" x2="34.32" y2="36.960003" class="solid end_marked_open_circle"></line>
+  <line x1="66" y1="39.600002" x2="66" y2="47.52" class="solid"></line>
+  <text x="27.720001" y="50.160004" >&lt;</text>
+  <line x1="34.32" y1="52.800003" x2="47.52" y2="52.800003" class="solid"></line>
+  <line x1="52.800003" y1="52.800003" x2="66" y2="52.800003" class="solid"></line>
+  <line x1="66" y1="47.52" x2="81.840004" y2="68.64" class="solid end_marked_open_circle"></line>
+  <text x="69.96" y="50.160004" >&gt;</text>
+  <line x1="17.16" y1="71.28001" x2="18.480001" y2="68.64" class="solid end_marked_open_circle"></line>
+  <line x1="83.16" y1="71.28001" x2="95.04" y2="95.04" class="solid"></line>
+  <text x="85.8" y="92.4" >&lt;</text>
+  <line x1="15.84" y1="73.920006" x2="5.28" y2="95.04" class="solid"></line>
+  <text x="11.88" y="92.4" >&gt;</text>
+  <polygon points="21.78,76.560005 17.16,81.840004 17.16,74.58" class="filled"></polygon>
+  <line x1="79.200005" y1="73.920006" x2="80.520004" y2="76.560005" class="solid"></line>
+  <polygon points="78.54,76.560005 83.16,81.840004 83.16,74.58" class="filled"></polygon>
+  <g>
+    <line x1="50.160004" y1="10.56" x2="50.160004" y2="15.84" class="solid"></line>
+    <line x1="50.160004" y1="15.84" x2="36.960003" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="34.32" y1="42.24" x2="34.32" y2="47.52" class="solid"></line>
+    <line x1="34.32" y1="47.52" x2="19.800001" y2="76.560005" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/effect/bigchief.flf b/static/db/contributed/effect/bigchief.flf
similarity index 100%
rename from db/contributed/effect/bigchief.flf
rename to static/db/contributed/effect/bigchief.flf
diff --git a/static/db/contributed/effect/bigchief.svg b/static/db/contributed/effect/bigchief.svg
new file mode 100644
index 0000000..457b3c9
--- /dev/null
+++ b/static/db/contributed/effect/bigchief.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="73.920006" 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="47.52" height="73.920006"></rect>
+  <line x1="0" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+  <g>
+    <line x1="21.12" y1="21.12" x2="34.32" y2="21.12" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="34.32" y1="21.12" x2="34.32" y2="63.36" class="solid"></line>
+    <line x1="0" y1="36.960003" x2="18.480001" y2="36.960003" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="34.32" y2="42.24" class="solid"></line>
+    <line x1="34.32" y1="36.960003" x2="42.24" y2="36.960003" class="solid"></line>
+    <line x1="0" y1="63.36" x2="42.24" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/effect/goofy.flf b/static/db/contributed/effect/goofy.flf
similarity index 100%
rename from db/contributed/effect/goofy.flf
rename to static/db/contributed/effect/goofy.flf
diff --git a/static/db/contributed/effect/goofy.svg b/static/db/contributed/effect/goofy.svg
new file mode 100644
index 0000000..12c6eab
--- /dev/null
+++ b/static/db/contributed/effect/goofy.svg
@@ -0,0 +1,124 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="73.920006" 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="63.36" height="73.920006"></rect>
+  <text x="1.32" y="50.160004" >|</text>
+  <line x1="2.64" y1="52.800003" x2="2.64" y2="63.36" class="solid"></line>
+  <text x="48.84" y="50.160004" >|</text>
+  <g>
+    <line x1="0" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="5.28" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="31.68" y1="10.56" x2="58.08" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="47.52" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="50.160004" y1="52.800003" x2="50.160004" y2="63.36" class="solid"></line>
+    <line x1="50.160004" y1="63.36" x2="58.08" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 26.400002,31.68 A 10.56,10.56 0,0,0 26.400002,42.24" class="nofill"></path>
+    <path d="M 26.400002,31.68 A 10.56,10.56 0,0,1 26.400002,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="21.12" y1="52.800003" x2="31.68" y2="52.800003" class="solid"></line>
+    <path d="M 21.12,52.800003 A 10.56,10.56 0,0,0 21.12,63.36" class="nofill"></path>
+    <line x1="21.12" y1="63.36" x2="31.68" y2="63.36" class="solid"></line>
+    <path d="M 31.68,52.800003 A 10.56,10.56 0,0,1 31.68,63.36" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/contributed/effect/lcd.flf b/static/db/contributed/effect/lcd.flf
similarity index 100%
rename from db/contributed/effect/lcd.flf
rename to static/db/contributed/effect/lcd.flf
diff --git a/static/db/contributed/effect/lcd.svg b/static/db/contributed/effect/lcd.svg
new file mode 100644
index 0000000..835ce4d
--- /dev/null
+++ b/static/db/contributed/effect/lcd.svg
@@ -0,0 +1,100 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="52.800003" 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="31.68" height="52.800003"></rect>
+  <rect x="2.64" y="10.56" width="21.12" height="31.68" class="solid nofill" rx="0"></rect>
+</svg>
diff --git a/db/contributed/effect/speed.flf b/static/db/contributed/effect/speed.flf
similarity index 100%
rename from db/contributed/effect/speed.flf
rename to static/db/contributed/effect/speed.flf
diff --git a/static/db/contributed/effect/speed.svg b/static/db/contributed/effect/speed.svg
new file mode 100644
index 0000000..dfae48e
--- /dev/null
+++ b/static/db/contributed/effect/speed.svg
@@ -0,0 +1,114 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="63.36" 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="47.52" height="63.36"></rect>
+  <line x1="0" y1="21.12" x2="15.84" y2="21.12" class="solid"></line>
+  <line x1="0" y1="31.68" x2="10.56" y2="31.68" class="solid"></line>
+  <line x1="26.400002" y1="21.12" x2="21.12" y2="31.68" class="solid"></line>
+  <line x1="29.04" y1="21.12" x2="29.04" y2="31.68" class="solid"></line>
+  <g>
+    <line x1="0" y1="10.56" x2="39.600002" y2="10.56" class="solid"></line>
+    <line x1="39.600002" y1="10.56" x2="39.600002" y2="52.800003" class="solid"></line>
+    <line x1="0" y1="42.24" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="5.28" y1="42.24" x2="0" y2="52.800003" class="solid"></line>
+    <line x1="0" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="29.04" y1="42.24" x2="29.04" y2="52.800003" class="solid"></line>
+    <line x1="29.04" y1="52.800003" x2="39.600002" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/effect/tinker-toy.flf b/static/db/contributed/effect/tinker-toy.flf
similarity index 100%
rename from db/contributed/effect/tinker-toy.flf
rename to static/db/contributed/effect/tinker-toy.flf
diff --git a/static/db/contributed/effect/tinker-toy.svg b/static/db/contributed/effect/tinker-toy.svg
new file mode 100644
index 0000000..3aa350f
--- /dev/null
+++ b/static/db/contributed/effect/tinker-toy.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="63.36" 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="31.68" height="63.36"></rect>
+  <line x1="11.88" y1="7.92" x2="13.200001" y2="5.28" class="solid end_marked_big_open_circle"></line>
+  <line x1="14.52" y1="7.92" x2="22.44" y2="23.76" class="solid"></line>
+  <line x1="10.56" y1="10.56" x2="2.64" y2="26.400002" class="solid end_marked_open_circle"></line>
+  <line x1="2.64" y1="29.04" x2="2.64" y2="47.52" class="solid end_marked_open_circle"></line>
+  <line x1="5.28" y1="26.400002" x2="23.76" y2="26.400002" class="solid end_marked_open_circle"></line>
+  <line x1="23.76" y1="29.04" x2="23.76" y2="47.52" class="solid end_marked_open_circle"></line>
+</svg>
diff --git a/db/contributed/effect/tombstone.flf b/static/db/contributed/effect/tombstone.flf
similarity index 100%
rename from db/contributed/effect/tombstone.flf
rename to static/db/contributed/effect/tombstone.flf
diff --git a/static/db/contributed/effect/tombstone.svg b/static/db/contributed/effect/tombstone.svg
new file mode 100644
index 0000000..79bc101
--- /dev/null
+++ b/static/db/contributed/effect/tombstone.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="52.800003" 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="26.400002" height="52.800003"></rect>
+  <text x="17.16" y="7.92" >,</text>
+  <line x1="5.28" y1="36.960003" x2="10.56" y2="36.960003" class="broken"></line>
+  <line x1="15.84" y1="36.960003" x2="21.12" y2="36.960003" class="broken"></line>
+  <g>
+    <line x1="10.56" y1="10.56" x2="15.84" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="7.92" y2="15.84" class="solid"></line>
+    <line x1="7.92" y1="15.84" x2="7.92" y2="31.68" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="18.480001" y2="15.84" class="solid"></line>
+    <line x1="18.480001" y1="15.84" x2="18.480001" y2="31.68" class="solid"></line>
+    <line x1="7.92" y1="26.400002" x2="18.480001" y2="26.400002" class="broken"></line>
+  </g>
+</svg>
diff --git a/db/contributed/fill/3-d.flf b/static/db/contributed/fill/3-d.flf
similarity index 100%
rename from db/contributed/fill/3-d.flf
rename to static/db/contributed/fill/3-d.flf
diff --git a/static/db/contributed/fill/3-d.svg b/static/db/contributed/fill/3-d.svg
new file mode 100644
index 0000000..d4b29b9
--- /dev/null
+++ b/static/db/contributed/fill/3-d.svg
@@ -0,0 +1,139 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="95.04" 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="63.36" height="95.04"></rect>
+  <line x1="29.04" y1="5.28" x2="34.32" y2="5.28" class="solid"></line>
+  <line x1="23.76" y1="15.84" x2="34.32" y2="15.84" class="solid end_marked_circle"></line>
+  <line x1="31.68" y1="15.84" x2="39.600002" y2="15.84" class="solid"></line>
+  <line x1="31.68" y1="21.12" x2="39.600002" y2="15.84" class="solid end_marked_circle"></line>
+  <line x1="31.68" y1="31.68" x2="39.600002" y2="26.400002" class="solid end_marked_circle"></line>
+  <line x1="18.480001" y1="26.400002" x2="23.76" y2="26.400002" class="solid"></line>
+  <line x1="31.68" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+  <line x1="39.600002" y1="26.400002" x2="44.88" y2="26.400002" class="solid"></line>
+  <line x1="36.960003" y1="31.68" x2="44.88" y2="26.400002" class="solid end_marked_circle"></line>
+  <line x1="43.56" y1="29.04" x2="35.640003" y2="44.88" class="solid"></line>
+  <line x1="13.200001" y1="36.960003" x2="18.480001" y2="36.960003" class="solid"></line>
+  <line x1="36.960003" y1="31.68" x2="30.36" y2="44.88" class="solid"></line>
+  <line x1="44.88" y1="36.960003" x2="50.160004" y2="36.960003" class="solid"></line>
+  <line x1="7.92" y1="47.52" x2="7.92" y2="47.52" class="solid end_marked_circle"></line>
+  <line x1="0" y1="63.36" x2="7.92" y2="58.08" class="solid end_marked_circle"></line>
+  <line x1="10.56" y1="47.52" x2="23.76" y2="47.52" class="solid end_marked_circle"></line>
+  <line x1="21.12" y1="47.52" x2="55.440002" y2="47.52" class="solid"></line>
+  <line x1="21.12" y1="52.800003" x2="29.04" y2="47.52" class="solid end_marked_circle"></line>
+  <line x1="26.400002" y1="52.800003" x2="34.32" y2="47.52" class="solid end_marked_circle"></line>
+  <line x1="31.68" y1="52.800003" x2="39.600002" y2="47.52" class="solid end_marked_circle"></line>
+  <line x1="36.960003" y1="52.800003" x2="44.88" y2="47.52" class="solid end_marked_circle"></line>
+  <line x1="42.24" y1="52.800003" x2="50.160004" y2="47.52" class="solid end_marked_circle"></line>
+  <line x1="42.24" y1="63.36" x2="50.160004" y2="58.08" class="solid end_marked_circle"></line>
+  <line x1="7.92" y1="58.08" x2="13.200001" y2="58.08" class="solid"></line>
+  <line x1="0" y1="73.920006" x2="7.92" y2="68.64" class="solid end_marked_circle"></line>
+  <line x1="21.12" y1="52.800003" x2="14.52" y2="66" class="solid"></line>
+  <line x1="26.400002" y1="52.800003" x2="21.12" y2="63.36" class="solid"></line>
+  <line x1="31.68" y1="52.800003" x2="26.400002" y2="63.36" class="solid"></line>
+  <line x1="36.960003" y1="52.800003" x2="31.68" y2="63.36" class="solid"></line>
+  <line x1="42.24" y1="52.800003" x2="36.960003" y2="63.36" class="solid"></line>
+  <line x1="50.160004" y1="58.08" x2="55.440002" y2="58.08" class="solid"></line>
+  <line x1="42.24" y1="73.920006" x2="50.160004" y2="68.64" class="solid end_marked_circle"></line>
+  <line x1="7.92" y1="68.64" x2="13.200001" y2="68.64" class="solid"></line>
+  <line x1="5.28" y1="73.920006" x2="13.200001" y2="68.64" class="solid end_marked_circle"></line>
+  <line x1="11.88" y1="71.28001" x2="5.28" y2="84.48" class="solid"></line>
+  <line x1="50.160004" y1="68.64" x2="55.440002" y2="68.64" class="solid"></line>
+  <line x1="47.52" y1="73.920006" x2="55.440002" y2="68.64" class="solid end_marked_circle"></line>
+  <line x1="54.120003" y1="71.28001" x2="47.52" y2="84.48" class="solid"></line>
+  <line x1="5.28" y1="73.920006" x2="0" y2="84.48" class="solid"></line>
+  <line x1="47.52" y1="73.920006" x2="42.24" y2="84.48" class="solid"></line>
+</svg>
diff --git a/db/contributed/fill/3x5.flf b/static/db/contributed/fill/3x5.flf
similarity index 100%
rename from db/contributed/fill/3x5.flf
rename to static/db/contributed/fill/3x5.flf
diff --git a/static/db/contributed/fill/3x5.svg b/static/db/contributed/fill/3x5.svg
new file mode 100644
index 0000000..00347e1
--- /dev/null
+++ b/static/db/contributed/fill/3x5.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="73.920006" 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="21.12" height="73.920006"></rect>
+  <text x="6.6000004" y="18.480001" >#</text>
+  <rect x="0" y="23.76" width="5.28" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="29.04" x2="2.64" y2="34.32" class="solid"></line>
+  <rect x="10.56" y="23.76" width="5.2799997" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="29.04" x2="13.200001" y2="34.32" class="solid"></line>
+  <rect x="0" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="39.600002" x2="2.64" y2="44.88" class="solid"></line>
+  <rect x="5.28" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="34.32" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="39.600002" x2="13.200001" y2="44.88" class="solid"></line>
+  <rect x="0" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="50.160004" x2="2.64" y2="55.440002" class="solid"></line>
+  <rect x="10.56" y="44.88" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="50.160004" x2="13.200001" y2="55.440002" class="solid"></line>
+  <rect x="0" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="55.440002" width="5.2799997" height="5.279999" class="solid filled" rx="0"></rect>
+</svg>
diff --git a/db/contributed/fill/alligator.flf b/static/db/contributed/fill/alligator.flf
similarity index 100%
rename from db/contributed/fill/alligator.flf
rename to static/db/contributed/fill/alligator.flf
diff --git a/static/db/contributed/fill/alligator.svg b/static/db/contributed/fill/alligator.svg
new file mode 100644
index 0000000..84647ad
--- /dev/null
+++ b/static/db/contributed/fill/alligator.svg
@@ -0,0 +1,158 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="84.48" 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="79.200005" height="84.48"></rect>
+  <text x="54.120003" y="7.92" >:</text>
+  <line x1="60.72" y1="0" x2="60.72" y2="44.88" class="broken"></line>
+  <text x="64.68" y="7.92" >:</text>
+  <text x="38.280003" y="18.480001" >:+:</text>
+  <line x1="66" y1="10.56" x2="66" y2="21.12" class="solid"></line>
+  <text x="69.96" y="18.480001" >:</text>
+  <text x="33" y="29.04" >:</text>
+  <line x1="39.600002" y1="21.12" x2="39.600002" y2="31.68" class="solid"></line>
+  <text x="64.68" y="29.04" >:</text>
+  <line x1="71.28001" y1="21.12" x2="71.28001" y2="31.68" class="solid"></line>
+  <rect x="21.12" y="34.32" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <text x="38.280003" y="39.600002" >:</text>
+  <line x1="44.88" y1="36.960003" x2="52.800003" y2="36.960003" class="solid"></line>
+  <rect x="52.800003" y="34.32" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <text x="69.96" y="39.600002" >:</text>
+  <rect x="15.84" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="18.480001" y1="50.160004" x2="18.480001" y2="55.440002" class="solid"></line>
+  <rect x="58.08" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="50.160004" x2="60.72" y2="55.440002" class="solid"></line>
+  <rect x="5.28" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="60.72" x2="7.92" y2="66" class="solid"></line>
+  <line x1="10.56" y1="58.08" x2="15.84" y2="58.08" class="solid"></line>
+  <rect x="15.84" y="55.440002" width="5.2800007" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="47.52" y="55.440002" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="60.72" x2="50.160004" y2="66" class="solid"></line>
+  <line x1="52.800003" y1="58.08" x2="58.08" y2="58.08" class="solid"></line>
+  <rect x="58.08" y="55.440002" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="0" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="5.28" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="66" width="5.2799997" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="47.52" y="66" width="5.2800026" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="52.800003" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <g>
+    <line x1="29.04" y1="26.400002" x2="29.04" y2="36.960003" class="solid"></line>
+    <line x1="26.400002" y1="36.960003" x2="34.32" y2="36.960003" class="solid"></line>
+    <line x1="34.32" y1="31.68" x2="34.32" y2="36.960003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="18.480001" y1="36.960003" x2="21.12" y2="36.960003" class="solid"></line>
+    <line x1="18.480001" y1="36.960003" x2="18.480001" y2="44.88" class="solid"></line>
+  </g>
+  <g>
+    <line x1="23.76" y1="39.600002" x2="23.76" y2="47.52" class="solid"></line>
+    <line x1="21.12" y1="47.52" x2="23.76" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="55.440002" y1="39.600002" x2="55.440002" y2="66" class="solid"></line>
+    <line x1="55.440002" y1="47.52" x2="58.08" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="58.08" y1="36.960003" x2="66" y2="36.960003" class="solid"></line>
+    <line x1="66" y1="31.68" x2="66" y2="47.52" class="solid"></line>
+    <line x1="63.36" y1="47.52" x2="66" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="13.200001" y1="47.52" x2="15.84" y2="47.52" class="solid"></line>
+    <line x1="13.200001" y1="47.52" x2="13.200001" y2="66" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/fill/alligator2.flf b/static/db/contributed/fill/alligator2.flf
similarity index 100%
rename from db/contributed/fill/alligator2.flf
rename to static/db/contributed/fill/alligator2.flf
diff --git a/static/db/contributed/fill/alligator2.svg b/static/db/contributed/fill/alligator2.svg
new file mode 100644
index 0000000..a6302d9
--- /dev/null
+++ b/static/db/contributed/fill/alligator2.svg
@@ -0,0 +1,155 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="84.48" 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="63.36" height="84.48"></rect>
+  <line x1="23.76" y1="0" x2="23.76" y2="21.12" class="broken"></line>
+  <text x="27.720001" y="7.92" >:</text>
+  <line x1="34.32" y1="0" x2="34.32" y2="21.12" class="broken"></line>
+  <line x1="39.600002" y1="15.84" x2="39.600002" y2="34.32" class="solid"></line>
+  <line x1="7.92" y1="26.400002" x2="7.92" y2="34.32" class="solid"></line>
+  <rect x="5.28" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="39.600002" x2="7.92" y2="44.88" class="solid"></line>
+  <text x="22.44" y="39.600002" >:</text>
+  <line x1="29.04" y1="36.960003" x2="36.960003" y2="36.960003" class="solid"></line>
+  <rect x="36.960003" y="34.32" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <text x="54.120003" y="39.600002" >:</text>
+  <rect x="5.28" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="50.160004" x2="7.92" y2="66" class="solid"></line>
+  <rect x="47.52" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="50.160004" x2="50.160004" y2="66" class="solid"></line>
+  <rect x="0" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="60.72" x2="2.64" y2="66" class="solid"></line>
+  <line x1="5.28" y1="58.08" x2="10.56" y2="58.08" class="solid"></line>
+  <rect x="10.56" y="55.440002" width="5.2799997" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="60.72" x2="13.200001" y2="66" class="solid"></line>
+  <rect x="42.24" y="55.440002" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="60.72" x2="44.88" y2="66" class="solid"></line>
+  <line x1="47.52" y1="58.08" x2="52.800003" y2="58.08" class="solid"></line>
+  <rect x="52.800003" y="55.440002" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="55.440002" y1="60.72" x2="55.440002" y2="66" class="solid"></line>
+  <rect x="0" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="5.28" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="66" width="5.2799997" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="47.52" y="66" width="5.2800026" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="52.800003" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <g>
+    <line x1="13.200001" y1="10.56" x2="13.200001" y2="55.440002" class="broken"></line>
+    <line x1="10.56" y1="47.52" x2="13.200001" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="18.480001" y1="15.84" x2="18.480001" y2="36.960003" class="solid"></line>
+    <line x1="10.56" y1="36.960003" x2="18.480001" y2="36.960003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="44.88" y1="10.56" x2="44.88" y2="55.440002" class="broken"></line>
+    <line x1="44.88" y1="47.52" x2="47.52" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="50.160004" y1="26.400002" x2="50.160004" y2="44.88" class="solid"></line>
+    <line x1="42.24" y1="36.960003" x2="50.160004" y2="36.960003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="2.64" y1="36.960003" x2="5.28" y2="36.960003" class="solid"></line>
+    <line x1="2.64" y1="36.960003" x2="2.64" y2="55.440002" class="solid"></line>
+    <line x1="2.64" y1="47.52" x2="5.28" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="55.440002" y1="42.24" x2="55.440002" y2="55.440002" class="solid"></line>
+    <line x1="52.800003" y1="47.52" x2="55.440002" y2="47.52" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/fill/alphabet.flf b/static/db/contributed/fill/alphabet.flf
similarity index 100%
rename from db/contributed/fill/alphabet.flf
rename to static/db/contributed/fill/alphabet.flf
diff --git a/static/db/contributed/fill/alphabet.svg b/static/db/contributed/fill/alphabet.svg
new file mode 100644
index 0000000..6c81907
--- /dev/null
+++ b/static/db/contributed/fill/alphabet.svg
@@ -0,0 +1,107 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="63.36" 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="26.400002" height="63.36"></rect>
+  <text x="6.6000004" y="7.92" >AA</text>
+  <text x="1.32" y="18.480001" >A</text>
+  <text x="17.16" y="18.480001" >A</text>
+  <text x="1.32" y="29.04" >AAAA</text>
+  <text x="1.32" y="39.600002" >A</text>
+  <text x="17.16" y="39.600002" >A</text>
+  <text x="1.32" y="50.160004" >A</text>
+  <text x="17.16" y="50.160004" >A</text>
+</svg>
diff --git a/db/contributed/fill/banner.flf b/static/db/contributed/fill/banner.flf
similarity index 100%
rename from db/contributed/fill/banner.flf
rename to static/db/contributed/fill/banner.flf
diff --git a/static/db/contributed/fill/banner.svg b/static/db/contributed/fill/banner.svg
new file mode 100644
index 0000000..745f34e
--- /dev/null
+++ b/static/db/contributed/fill/banner.svg
@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="84.48" 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="42.24" height="84.48"></rect>
+  <text x="17.16" y="7.92" >#</text>
+  <text x="11.88" y="18.480001" >#</text>
+  <text x="22.44" y="18.480001" >#</text>
+  <text x="6.6000004" y="29.04" >#</text>
+  <text x="27.720001" y="29.04" >#</text>
+  <rect x="0" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="39.600002" x2="2.64" y2="44.88" class="solid"></line>
+  <rect x="31.68" y="34.32" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="39.600002" x2="34.32" y2="44.88" class="solid"></line>
+  <rect x="0" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="50.160004" x2="2.64" y2="55.440002" class="solid"></line>
+  <rect x="5.28" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="44.88" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="15.84" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="21.12" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="26.400002" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="50.160004" x2="34.32" y2="55.440002" class="solid"></line>
+  <rect x="0" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="60.72" x2="2.64" y2="66" class="solid"></line>
+  <rect x="31.68" y="55.440002" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="60.72" x2="34.32" y2="66" class="solid"></line>
+  <rect x="0" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="66" width="5.2800026" height="5.2800064" class="solid filled" rx="0"></rect>
+</svg>
diff --git a/db/contributed/fill/banner3-D.flf b/static/db/contributed/fill/banner3-D.flf
similarity index 100%
rename from db/contributed/fill/banner3-D.flf
rename to static/db/contributed/fill/banner3-D.flf
diff --git a/static/db/contributed/fill/banner3-D.svg b/static/db/contributed/fill/banner3-D.svg
new file mode 100644
index 0000000..404f95f
--- /dev/null
+++ b/static/db/contributed/fill/banner3-D.svg
@@ -0,0 +1,192 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="95.04" 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="63.36" height="95.04"></rect>
+  <text x="11.88" y="7.92" >:&#39;</text>
+  <rect x="21.12" y="2.64" width="5.2800007" height="5.2799997" class="solid filled" rx="0"></rect>
+  <line x1="23.76" y1="7.92" x2="23.76" y2="13.200001" class="solid"></line>
+  <rect x="26.400002" y="2.64" width="5.279999" height="5.2799997" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="2.64" width="5.2800026" height="5.2799997" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="7.92" x2="34.32" y2="13.200001" class="solid"></line>
+  <text x="38.280003" y="7.92" >:</text>
+  <line x1="44.88" y1="0" x2="44.88" y2="23.76" class="broken"></line>
+  <line x1="50.160004" y1="0" x2="50.160004" y2="34.32" class="broken"></line>
+  <line x1="55.440002" y1="0" x2="55.440002" y2="84.48" class="broken"></line>
+  <rect x="15.84" y="13.200001" width="5.2800007" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="18.480001" y1="18.480001" x2="18.480001" y2="23.76" class="solid"></line>
+  <rect x="21.12" y="13.200001" width="5.2800007" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="23.76" y1="18.480001" x2="23.76" y2="44.88" class="broken"></line>
+  <rect x="31.68" y="13.200001" width="5.2800026" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="39.600002" y1="10.56" x2="39.600002" y2="13.200001" class="solid"></line>
+  <rect x="36.960003" y="13.200001" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="39.600002" y1="18.480001" x2="39.600002" y2="23.76" class="solid"></line>
+  <rect x="10.56" y="23.76" width="5.2799997" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="29.04" x2="13.200001" y2="34.32" class="solid"></line>
+  <rect x="15.84" y="23.76" width="5.2800007" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="18.480001" y1="29.04" x2="18.480001" y2="31.68" class="solid"></line>
+  <line x1="29.04" y1="29.04" x2="29.04" y2="31.68" class="solid"></line>
+  <rect x="36.960003" y="23.76" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="23.76" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="29.04" x2="44.88" y2="34.32" class="solid"></line>
+  <rect x="5.28" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="39.600002" x2="7.92" y2="44.88" class="solid"></line>
+  <rect x="10.56" y="34.32" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="39.600002" x2="13.200001" y2="44.88" class="solid"></line>
+  <text x="17.16" y="39.600002" >:</text>
+  <text x="27.720001" y="39.600002" >:.</text>
+  <rect x="42.24" y="34.32" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="39.600002" x2="44.88" y2="44.88" class="solid"></line>
+  <rect x="47.52" y="34.32" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="39.600002" x2="50.160004" y2="44.88" class="solid"></line>
+  <rect x="5.28" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="50.160004" x2="7.92" y2="55.440002" class="solid"></line>
+  <rect x="10.56" y="44.88" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="50.160004" x2="13.200001" y2="55.440002" class="solid"></line>
+  <line x1="18.480001" y1="42.24" x2="18.480001" y2="44.88" class="solid"></line>
+  <rect x="15.84" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="21.12" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="29.04" y1="42.24" x2="29.04" y2="44.88" class="solid"></line>
+  <rect x="26.400002" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="42.24" x2="34.32" y2="44.88" class="solid"></line>
+  <rect x="31.68" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="36.960003" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="50.160004" x2="44.88" y2="55.440002" class="solid"></line>
+  <rect x="47.52" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="50.160004" x2="50.160004" y2="55.440002" class="solid"></line>
+  <rect x="5.28" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="60.72" x2="7.92" y2="66" class="solid"></line>
+  <rect x="10.56" y="55.440002" width="5.2799997" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="60.72" x2="13.200001" y2="66" class="solid"></line>
+  <line x1="23.76" y1="60.72" x2="23.76" y2="84.48" class="broken"></line>
+  <line x1="29.04" y1="60.72" x2="29.04" y2="84.48" class="broken"></line>
+  <line x1="34.32" y1="60.72" x2="34.32" y2="84.48" class="broken"></line>
+  <rect x="42.24" y="55.440002" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="60.72" x2="44.88" y2="66" class="solid"></line>
+  <rect x="47.52" y="55.440002" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="60.72" x2="50.160004" y2="66" class="solid"></line>
+  <rect x="5.28" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="66" width="5.2799997" height="5.2800064" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="71.28001" x2="13.200001" y2="73.920006" class="solid"></line>
+  <rect x="42.24" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="47.52" y="66" width="5.2800026" height="5.2800064" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="71.28001" x2="50.160004" y2="73.920006" class="solid"></line>
+  <text x="1.32" y="81.840004" >..:</text>
+  <text x="38.280003" y="81.840004" >..:</text>
+  <g>
+    <line x1="2.64" y1="0" x2="2.64" y2="34.32" class="broken"></line>
+    <path d="M 2.64,34.32 A 2.64,2.64 0,0,0 5.28,36.960003" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="7.92" y1="0" x2="7.92" y2="23.76" class="broken"></line>
+    <path d="M 7.92,23.76 A 2.64,2.64 0,0,0 10.56,26.400002" class="nofill"></path>
+    <path d="M 2.64,21.12 A 5.28,5.28 0,0,0 7.92,26.400002" class="nofill"></path>
+    <line x1="7.92" y1="26.400002" x2="10.56" y2="26.400002" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 7.92,10.56 A 5.28,5.28 0,0,0 13.200001,15.84" class="nofill"></path>
+    <line x1="13.200001" y1="10.56" x2="13.200001" y2="13.200001" class="solid"></line>
+    <path d="M 13.200001,13.200001 A 2.64,2.64 0,0,0 15.84,15.84" class="nofill"></path>
+    <line x1="13.200001" y1="15.84" x2="15.84" y2="15.84" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="58.08" x2="18.480001" y2="58.08" class="solid"></line>
+    <path d="M 15.84,58.08 A 2.64,2.64 0,0,1 18.480001,60.72" class="nofill"></path>
+    <path d="M 18.480001,58.08 A 5.28,5.28 0,0,1 23.76,63.36" class="nofill"></path>
+    <line x1="18.480001" y1="60.72" x2="18.480001" y2="84.48" class="broken"></line>
+  </g>
+</svg>
diff --git a/db/contributed/fill/banner3.flf b/static/db/contributed/fill/banner3.flf
similarity index 100%
rename from db/contributed/fill/banner3.flf
rename to static/db/contributed/fill/banner3.flf
diff --git a/static/db/contributed/fill/banner3.svg b/static/db/contributed/fill/banner3.svg
new file mode 100644
index 0000000..91f94be
--- /dev/null
+++ b/static/db/contributed/fill/banner3.svg
@@ -0,0 +1,149 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="84.48" 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="52.800003" height="84.48"></rect>
+  <rect x="15.84" y="2.64" width="5.2800007" height="5.2799997" class="solid filled" rx="0"></rect>
+  <line x1="18.480001" y1="7.92" x2="18.480001" y2="13.200001" class="solid"></line>
+  <rect x="21.12" y="2.64" width="5.2800007" height="5.2799997" class="solid filled" rx="0"></rect>
+  <rect x="26.400002" y="2.64" width="5.279999" height="5.2799997" class="solid filled" rx="0"></rect>
+  <line x1="29.04" y1="7.92" x2="29.04" y2="13.200001" class="solid"></line>
+  <rect x="10.56" y="13.200001" width="5.2799997" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="18.480001" x2="13.200001" y2="23.76" class="solid"></line>
+  <rect x="15.84" y="13.200001" width="5.2800007" height="5.2800007" class="solid filled" rx="0"></rect>
+  <rect x="26.400002" y="13.200001" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="13.200001" width="5.2800026" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="18.480001" x2="34.32" y2="23.76" class="solid"></line>
+  <rect x="5.28" y="23.76" width="5.28" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="29.04" x2="7.92" y2="34.32" class="solid"></line>
+  <rect x="10.56" y="23.76" width="5.2799997" height="5.2800007" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="23.76" width="5.2800026" height="5.2800007" class="solid filled" rx="0"></rect>
+  <rect x="36.960003" y="23.76" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="39.600002" y1="29.04" x2="39.600002" y2="34.32" class="solid"></line>
+  <rect x="0" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="39.600002" x2="2.64" y2="44.88" class="solid"></line>
+  <rect x="5.28" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="39.600002" x2="7.92" y2="44.88" class="solid"></line>
+  <rect x="36.960003" y="34.32" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="39.600002" y1="39.600002" x2="39.600002" y2="44.88" class="solid"></line>
+  <rect x="42.24" y="34.32" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="39.600002" x2="44.88" y2="44.88" class="solid"></line>
+  <rect x="0" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="50.160004" x2="2.64" y2="55.440002" class="solid"></line>
+  <rect x="5.28" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="50.160004" x2="7.92" y2="55.440002" class="solid"></line>
+  <rect x="10.56" y="44.88" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="15.84" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="21.12" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="26.400002" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="36.960003" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="39.600002" y1="50.160004" x2="39.600002" y2="55.440002" class="solid"></line>
+  <rect x="42.24" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="50.160004" x2="44.88" y2="55.440002" class="solid"></line>
+  <rect x="0" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="60.72" x2="2.64" y2="66" class="solid"></line>
+  <rect x="5.28" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="60.72" x2="7.92" y2="66" class="solid"></line>
+  <rect x="36.960003" y="55.440002" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="39.600002" y1="60.72" x2="39.600002" y2="66" class="solid"></line>
+  <rect x="42.24" y="55.440002" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="60.72" x2="44.88" y2="66" class="solid"></line>
+  <rect x="0" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="5.28" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="36.960003" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+</svg>
diff --git a/db/contributed/fill/banner4.flf b/static/db/contributed/fill/banner4.flf
similarity index 100%
rename from db/contributed/fill/banner4.flf
rename to static/db/contributed/fill/banner4.flf
diff --git a/static/db/contributed/fill/banner4.svg b/static/db/contributed/fill/banner4.svg
new file mode 100644
index 0000000..21d6a66
--- /dev/null
+++ b/static/db/contributed/fill/banner4.svg
@@ -0,0 +1,202 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="84.48" 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="58.08" height="84.48"></rect>
+  <text x="1.32" y="7.92" >...</text>
+  <rect x="21.12" y="2.64" width="5.2800007" height="5.2799997" class="solid filled" rx="0"></rect>
+  <line x1="23.76" y1="7.92" x2="23.76" y2="13.200001" class="solid"></line>
+  <rect x="26.400002" y="2.64" width="5.279999" height="5.2799997" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="2.64" width="5.2800026" height="5.2799997" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="7.92" x2="34.32" y2="13.200001" class="solid"></line>
+  <text x="43.56" y="7.92" >..</text>
+  <text x="1.32" y="18.480001" >..</text>
+  <rect x="15.84" y="13.200001" width="5.2800007" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="18.480001" y1="18.480001" x2="18.480001" y2="23.76" class="solid"></line>
+  <rect x="21.12" y="13.200001" width="5.2800007" height="5.2800007" class="solid filled" rx="0"></rect>
+  <text x="27.720001" y="18.480001" >.</text>
+  <rect x="31.68" y="13.200001" width="5.2800026" height="5.2800007" class="solid filled" rx="0"></rect>
+  <rect x="36.960003" y="13.200001" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="39.600002" y1="18.480001" x2="39.600002" y2="23.76" class="solid"></line>
+  <text x="48.84" y="18.480001" >.</text>
+  <text x="1.32" y="29.04" >.</text>
+  <rect x="10.56" y="23.76" width="5.2799997" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="29.04" x2="13.200001" y2="34.32" class="solid"></line>
+  <rect x="15.84" y="23.76" width="5.2800007" height="5.2800007" class="solid filled" rx="0"></rect>
+  <text x="22.44" y="29.04" >...</text>
+  <rect x="36.960003" y="23.76" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="23.76" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="29.04" x2="44.88" y2="34.32" class="solid"></line>
+  <text x="1.32" y="39.600002" >.</text>
+  <rect x="5.28" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="39.600002" x2="7.92" y2="44.88" class="solid"></line>
+  <rect x="10.56" y="34.32" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="39.600002" x2="13.200001" y2="44.88" class="solid"></line>
+  <text x="22.44" y="39.600002" >...</text>
+  <rect x="42.24" y="34.32" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="39.600002" x2="44.88" y2="44.88" class="solid"></line>
+  <rect x="47.52" y="34.32" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="39.600002" x2="50.160004" y2="44.88" class="solid"></line>
+  <text x="1.32" y="50.160004" >.</text>
+  <rect x="5.28" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="50.160004" x2="7.92" y2="55.440002" class="solid"></line>
+  <rect x="10.56" y="44.88" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="50.160004" x2="13.200001" y2="55.440002" class="solid"></line>
+  <rect x="15.84" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="21.12" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="29.04" y1="42.24" x2="29.04" y2="44.88" class="solid"></line>
+  <rect x="26.400002" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="36.960003" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="50.160004" x2="44.88" y2="55.440002" class="solid"></line>
+  <rect x="47.52" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="50.160004" x2="50.160004" y2="55.440002" class="solid"></line>
+  <text x="1.32" y="60.72" >.</text>
+  <rect x="5.28" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="60.72" x2="7.92" y2="66" class="solid"></line>
+  <rect x="10.56" y="55.440002" width="5.2799997" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="60.72" x2="13.200001" y2="66" class="solid"></line>
+  <text x="17.16" y="60.72" >.....</text>
+  <rect x="42.24" y="55.440002" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="60.72" x2="44.88" y2="66" class="solid"></line>
+  <rect x="47.52" y="55.440002" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="60.72" x2="50.160004" y2="66" class="solid"></line>
+  <text x="1.32" y="71.28001" >.</text>
+  <rect x="5.28" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="66" width="5.2799997" height="5.2800064" class="solid filled" rx="0"></rect>
+  <text x="17.16" y="71.28001" >.....</text>
+  <rect x="42.24" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="47.52" y="66" width="5.2800026" height="5.2800064" class="solid filled" rx="0"></rect>
+  <g>
+    <path d="M 21.12,5.28 A 2.64,2.64 0,0,0 18.480001,7.92" class="nofill"></path>
+    <line x1="18.480001" y1="7.92" x2="18.480001" y2="13.200001" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 36.960003,5.28 A 2.64,2.64 0,0,1 39.600002,7.92" class="nofill"></path>
+    <line x1="39.600002" y1="7.92" x2="39.600002" y2="13.200001" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 15.84,15.84 A 2.64,2.64 0,0,0 13.200001,18.480001" class="nofill"></path>
+    <line x1="13.200001" y1="18.480001" x2="13.200001" y2="23.76" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 42.24,15.84 A 2.64,2.64 0,0,1 44.88,18.480001" class="nofill"></path>
+    <line x1="44.88" y1="18.480001" x2="44.88" y2="23.76" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 10.56,26.400002 A 2.64,2.64 0,0,0 7.92,29.04" class="nofill"></path>
+    <line x1="7.92" y1="29.04" x2="7.92" y2="34.32" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 47.52,26.400002 A 2.64,2.64 0,0,1 50.160004,29.04" class="nofill"></path>
+    <line x1="50.160004" y1="29.04" x2="50.160004" y2="34.32" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="36.960003" x2="18.480001" y2="36.960003" class="solid"></line>
+    <path d="M 15.84,36.960003 A 2.64,2.64 0,0,1 18.480001,39.600002" class="nofill"></path>
+    <path d="M 18.480001,36.960003 A 5.28,5.28 0,0,1 23.76,42.24" class="nofill"></path>
+    <line x1="18.480001" y1="39.600002" x2="18.480001" y2="44.88" class="solid"></line>
+    <line x1="23.76" y1="42.24" x2="23.76" y2="44.88" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 39.600002,36.960003 A 5.28,5.28 0,0,0 34.32,42.24" class="nofill"></path>
+    <line x1="39.600002" y1="36.960003" x2="42.24" y2="36.960003" class="solid"></line>
+    <path d="M 42.24,36.960003 A 2.64,2.64 0,0,0 39.600002,39.600002" class="nofill"></path>
+    <line x1="39.600002" y1="39.600002" x2="39.600002" y2="44.88" class="solid"></line>
+    <line x1="34.32" y1="42.24" x2="34.32" y2="44.88" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/fill/basic.flf b/static/db/contributed/fill/basic.flf
similarity index 100%
rename from db/contributed/fill/basic.flf
rename to static/db/contributed/fill/basic.flf
diff --git a/static/db/contributed/fill/basic.svg b/static/db/contributed/fill/basic.svg
new file mode 100644
index 0000000..8150c0f
--- /dev/null
+++ b/static/db/contributed/fill/basic.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="73.920006" 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="42.24" height="73.920006"></rect>
+  <text x="6.6000004" y="7.92" >.d8b.</text>
+  <text x="1.32" y="18.480001" >d8&#39;</text>
+  <text x="22.44" y="18.480001" >`8b</text>
+  <text x="1.32" y="29.04" >88ooo88</text>
+  <text x="1.32" y="39.600002" >88</text>
+  <line x1="10.56" y1="36.960003" x2="26.400002" y2="36.960003" class="broken"></line>
+  <text x="27.720001" y="39.600002" >88</text>
+  <text x="1.32" y="50.160004" >88</text>
+  <text x="27.720001" y="50.160004" >88</text>
+  <text x="1.32" y="60.72" >YP</text>
+  <text x="27.720001" y="60.72" >YP</text>
+</svg>
diff --git a/db/contributed/fill/broadway.flf b/static/db/contributed/fill/broadway.flf
similarity index 100%
rename from db/contributed/fill/broadway.flf
rename to static/db/contributed/fill/broadway.flf
diff --git a/static/db/contributed/fill/broadway.svg b/static/db/contributed/fill/broadway.svg
new file mode 100644
index 0000000..5f6ea20
--- /dev/null
+++ b/static/db/contributed/fill/broadway.svg
@@ -0,0 +1,119 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="116.16" height="126.72" 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="116.16" height="126.72"></rect>
+  <text x="48.84" y="18.480001" >.8.</text>
+  <text x="43.56" y="29.04" >.888.</text>
+  <text x="38.280003" y="39.600002" >:88888.</text>
+  <text x="33" y="50.160004" >.</text>
+  <text x="43.56" y="50.160004" >`88888.</text>
+  <text x="27.720001" y="60.72" >.8.</text>
+  <text x="48.84" y="60.72" >`88888.</text>
+  <text x="22.44" y="71.28001" >.8`8.</text>
+  <text x="54.120003" y="71.28001" >`88888.</text>
+  <text x="17.16" y="81.840004" >.8&#39;</text>
+  <text x="38.280003" y="81.840004" >`8.</text>
+  <text x="59.4" y="81.840004" >`88888.</text>
+  <text x="11.88" y="92.4" >.8&#39;</text>
+  <text x="43.56" y="92.4" >`8.</text>
+  <text x="64.68" y="92.4" >`88888.</text>
+  <text x="6.6000004" y="102.96001" >.888888888.</text>
+  <text x="69.96" y="102.96001" >`88888.</text>
+  <text x="1.32" y="113.520004" >.8&#39;</text>
+  <text x="54.120003" y="113.520004" >`8.</text>
+  <text x="75.240005" y="113.520004" >`88888.</text>
+</svg>
diff --git a/db/contributed/fill/calgphy2.flf b/static/db/contributed/fill/calgphy2.flf
similarity index 100%
rename from db/contributed/fill/calgphy2.flf
rename to static/db/contributed/fill/calgphy2.flf
diff --git a/static/db/contributed/fill/calgphy2.svg b/static/db/contributed/fill/calgphy2.svg
new file mode 100644
index 0000000..36cf50f
--- /dev/null
+++ b/static/db/contributed/fill/calgphy2.svg
@@ -0,0 +1,188 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95.04" height="200.64001" 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="95.04" height="200.64001"></rect>
+  <rect x="42.24" y="13.200001" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="18.480001" x2="44.88" y2="23.76" class="solid"></line>
+  <rect x="47.52" y="13.200001" width="5.2800026" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="18.480001" x2="50.160004" y2="23.76" class="solid"></line>
+  <line x1="31.68" y1="21.12" x2="21.12" y2="42.24" class="solid"></line>
+  <rect x="31.68" y="23.76" width="5.2800026" height="5.2800007" class="solid filled" rx="0"></rect>
+  <rect x="36.960003" y="23.76" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="39.600002" y1="29.04" x2="39.600002" y2="34.32" class="solid"></line>
+  <rect x="42.24" y="23.76" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="29.04" x2="44.88" y2="34.32" class="solid"></line>
+  <rect x="47.52" y="23.76" width="5.2800026" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="29.04" x2="50.160004" y2="34.32" class="solid"></line>
+  <rect x="36.960003" y="34.32" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="34.32" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <polygon points="46.728004,39.600002 46.728004,34.32 43.032,34.32 43.032,39.600002" class="filled"></polygon>
+  <line x1="43.56" y1="39.600002" x2="31.68" y2="63.36" class="solid"></line>
+  <line x1="44.88" y1="39.600002" x2="44.88" y2="44.88" class="solid"></line>
+  <rect x="47.52" y="34.32" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="39.600002" x2="50.160004" y2="44.88" class="solid"></line>
+  <rect x="42.24" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="47.52" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="50.160004" x2="50.160004" y2="55.440002" class="solid"></line>
+  <rect x="47.52" y="55.440002" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="60.72" x2="50.160004" y2="66" class="solid"></line>
+  <rect x="52.800003" y="55.440002" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="55.440002" y1="60.72" x2="55.440002" y2="66" class="solid"></line>
+  <line x1="36.960003" y1="63.36" x2="26.400002" y2="84.48" class="solid"></line>
+  <rect x="47.52" y="66" width="5.2800026" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="52.800003" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <line x1="55.440002" y1="71.28001" x2="55.440002" y2="76.560005" class="solid"></line>
+  <rect x="52.800003" y="76.560005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="55.440002" y1="81.840004" x2="55.440002" y2="87.12" class="solid"></line>
+  <rect x="58.08" y="76.560005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="81.840004" x2="60.72" y2="87.12" class="solid"></line>
+  <line x1="31.68" y1="84.48" x2="21.12" y2="105.600006" class="solid"></line>
+  <rect x="52.800003" y="87.12" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="58.08" y="87.12" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="92.4" x2="60.72" y2="97.68" class="solid"></line>
+  <rect x="58.08" y="97.68" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="102.96001" x2="60.72" y2="108.240005" class="solid"></line>
+  <rect x="63.36" y="97.68" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <line x1="66" y1="102.96001" x2="66" y2="108.240005" class="solid"></line>
+  <line x1="26.400002" y1="105.600006" x2="15.84" y2="126.72" class="solid"></line>
+  <rect x="26.400002" y="108.240005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="108.240005" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="36.960003" y="108.240005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="108.240005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="47.52" y="108.240005" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="52.800003" y="108.240005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="58.08" y="108.240005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="63.36" y="108.240005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="66" y1="113.520004" x2="66" y2="118.8" class="solid"></line>
+  <rect x="63.36" y="118.8" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="66" y1="124.08" x2="66" y2="129.36" class="solid"></line>
+  <rect x="68.64" y="118.8" width="5.2800064" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="71.28001" y1="124.08" x2="71.28001" y2="129.36" class="solid"></line>
+  <rect x="15.84" y="129.36" width="5.2800007" height="5.279999" class="solid filled" rx="0"></rect>
+  <polygon points="20.328001,134.64 20.328001,129.36 16.632002,129.36 16.632002,134.64" class="filled"></polygon>
+  <line x1="17.16" y1="134.64" x2="0" y2="168.96" class="solid"></line>
+  <line x1="18.480001" y1="134.64" x2="18.480001" y2="139.92" class="solid"></line>
+  <rect x="63.36" y="129.36" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="68.64" y="129.36" width="5.2800064" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="71.28001" y1="134.64" x2="71.28001" y2="139.92" class="solid"></line>
+  <rect x="15.84" y="139.92" width="5.2800007" height="5.280014" class="solid filled" rx="0"></rect>
+  <rect x="21.12" y="139.92" width="5.2800007" height="5.280014" class="solid filled" rx="0"></rect>
+  <rect x="26.400002" y="139.92" width="5.279999" height="5.280014" class="solid filled" rx="0"></rect>
+  <line x1="29.04" y1="145.20001" x2="29.04" y2="150.48001" class="solid"></line>
+  <rect x="31.68" y="139.92" width="5.2800026" height="5.280014" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="145.20001" x2="34.32" y2="150.48001" class="solid"></line>
+  <rect x="68.64" y="139.92" width="5.2800064" height="5.280014" class="solid filled" rx="0"></rect>
+  <line x1="71.28001" y1="145.20001" x2="71.28001" y2="150.48001" class="solid"></line>
+  <rect x="73.920006" y="139.92" width="5.279999" height="5.280014" class="solid filled" rx="0"></rect>
+  <line x1="76.560005" y1="145.20001" x2="76.560005" y2="150.48001" class="solid"></line>
+  <rect x="26.400002" y="150.48001" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="150.48001" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="155.76001" x2="34.32" y2="161.04001" class="solid"></line>
+  <rect x="36.960003" y="150.48001" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="39.600002" y1="155.76001" x2="39.600002" y2="161.04001" class="solid"></line>
+  <rect x="42.24" y="150.48001" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="68.64" y="150.48001" width="5.2800064" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="73.920006" y="150.48001" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="76.560005" y1="155.76001" x2="76.560005" y2="161.04001" class="solid"></line>
+  <line x1="89.76" y1="147.84001" x2="79.200005" y2="168.96" class="solid"></line>
+  <rect x="31.68" y="161.04001" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="36.960003" y="161.04001" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="73.920006" y="161.04001" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <text x="1.32" y="176.88" >#</text>
+  <rect x="5.28" y="182.16" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="182.16" width="5.2799997" height="5.279999" class="solid filled" rx="0"></rect>
+</svg>
diff --git a/db/contributed/fill/colossal.flf b/static/db/contributed/fill/colossal.flf
similarity index 100%
rename from db/contributed/fill/colossal.flf
rename to static/db/contributed/fill/colossal.flf
diff --git a/static/db/contributed/fill/colossal.svg b/static/db/contributed/fill/colossal.svg
new file mode 100644
index 0000000..45dced0
--- /dev/null
+++ b/static/db/contributed/fill/colossal.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="68.64" height="95.04" 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="68.64" height="95.04"></rect>
+  <text x="38.280003" y="7.92" >d8888</text>
+  <text x="33" y="18.480001" >d88888</text>
+  <text x="27.720001" y="29.04" >d88P888</text>
+  <text x="22.44" y="39.600002" >d88P</text>
+  <text x="48.84" y="39.600002" >888</text>
+  <text x="17.16" y="50.160004" >d88P</text>
+  <text x="48.84" y="50.160004" >888</text>
+  <text x="11.88" y="60.72" >d88P</text>
+  <text x="48.84" y="60.72" >888</text>
+  <text x="6.6000004" y="71.28001" >d8888888888</text>
+  <text x="1.32" y="81.840004" >d88P</text>
+  <text x="48.84" y="81.840004" >888</text>
+</svg>
diff --git a/db/contributed/fill/computer.flf b/static/db/contributed/fill/computer.flf
similarity index 100%
rename from db/contributed/fill/computer.flf
rename to static/db/contributed/fill/computer.flf
diff --git a/static/db/contributed/fill/computer.svg b/static/db/contributed/fill/computer.svg
new file mode 100644
index 0000000..aa22f37
--- /dev/null
+++ b/static/db/contributed/fill/computer.svg
@@ -0,0 +1,112 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="73.920006" 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="36.960003" height="73.920006"></rect>
+  <text x="1.32" y="7.92" >8</text>
+  <text x="27.720001" y="7.92" >8</text>
+  <text x="1.32" y="18.480001" >8</text>
+  <text x="27.720001" y="18.480001" >8</text>
+  <text x="1.32" y="29.04" >8eeee8</text>
+  <text x="1.32" y="39.600002" >88</text>
+  <text x="27.720001" y="39.600002" >8</text>
+  <text x="1.32" y="50.160004" >88</text>
+  <text x="27.720001" y="50.160004" >8</text>
+  <text x="1.32" y="60.72" >88</text>
+  <text x="27.720001" y="60.72" >8</text>
+  <text x="6.6000004" y="7.92" ></text>
+  <text x="17.16" y="7.92" ></text>
+</svg>
diff --git a/db/contributed/fill/contrast.flf b/static/db/contributed/fill/contrast.flf
similarity index 100%
rename from db/contributed/fill/contrast.flf
rename to static/db/contributed/fill/contrast.flf
diff --git a/static/db/contributed/fill/contrast.svg b/static/db/contributed/fill/contrast.svg
new file mode 100644
index 0000000..508b645
--- /dev/null
+++ b/static/db/contributed/fill/contrast.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="73.920006" 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="47.52" height="73.920006"></rect>
+  <text x="1.32" y="7.92" >..%%%%..</text>
+  <text x="1.32" y="18.480001" >.%%..%%.</text>
+  <text x="1.32" y="29.04" >.%%%%%%.</text>
+  <text x="1.32" y="39.600002" >.%%..%%.</text>
+  <text x="1.32" y="50.160004" >.%%..%%.</text>
+  <text x="1.32" y="60.72" >........</text>
+</svg>
diff --git a/db/contributed/fill/cosmic.flf b/static/db/contributed/fill/cosmic.flf
similarity index 100%
rename from db/contributed/fill/cosmic.flf
rename to static/db/contributed/fill/cosmic.flf
diff --git a/static/db/contributed/fill/cosmic.svg b/static/db/contributed/fill/cosmic.svg
new file mode 100644
index 0000000..b78ed7d
--- /dev/null
+++ b/static/db/contributed/fill/cosmic.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="73.920006" 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="63.36" height="73.920006"></rect>
+  <text x="11.88" y="7.92" >:::.</text>
+  <text x="11.88" y="18.480001" >;;`;;</text>
+  <text x="6.6000004" y="29.04" >,[[</text>
+  <text x="27.720001" y="29.04" >&#39;[[,</text>
+  <text x="1.32" y="39.600002" >c$$$cc$$$c</text>
+  <text x="6.6000004" y="50.160004" >888</text>
+  <text x="38.280003" y="50.160004" >888,</text>
+  <text x="6.6000004" y="60.72" >YMM</text>
+  <text x="48.84" y="60.72" >`</text>
+  <text x="38.280003" y="60.72" ></text>
+</svg>
diff --git a/db/contributed/fill/cosmike.flf b/static/db/contributed/fill/cosmike.flf
similarity index 100%
rename from db/contributed/fill/cosmike.flf
rename to static/db/contributed/fill/cosmike.flf
diff --git a/static/db/contributed/fill/cosmike.svg b/static/db/contributed/fill/cosmike.svg
new file mode 100644
index 0000000..b78ed7d
--- /dev/null
+++ b/static/db/contributed/fill/cosmike.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="73.920006" 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="63.36" height="73.920006"></rect>
+  <text x="11.88" y="7.92" >:::.</text>
+  <text x="11.88" y="18.480001" >;;`;;</text>
+  <text x="6.6000004" y="29.04" >,[[</text>
+  <text x="27.720001" y="29.04" >&#39;[[,</text>
+  <text x="1.32" y="39.600002" >c$$$cc$$$c</text>
+  <text x="6.6000004" y="50.160004" >888</text>
+  <text x="38.280003" y="50.160004" >888,</text>
+  <text x="6.6000004" y="60.72" >YMM</text>
+  <text x="48.84" y="60.72" >`</text>
+  <text x="38.280003" y="60.72" ></text>
+</svg>
diff --git a/db/contributed/fill/doh.flf b/static/db/contributed/fill/doh.flf
similarity index 100%
rename from db/contributed/fill/doh.flf
rename to static/db/contributed/fill/doh.flf
diff --git a/static/db/contributed/fill/doh.svg b/static/db/contributed/fill/doh.svg
new file mode 100644
index 0000000..64d450a
--- /dev/null
+++ b/static/db/contributed/fill/doh.svg
@@ -0,0 +1,173 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="179.52" height="200.64001" 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="179.52" height="200.64001"></rect>
+  <text x="80.520004" y="29.04" >AAA</text>
+  <text x="75.240005" y="39.600002" >A</text>
+  <line x1="81.840004" y1="31.68" x2="81.840004" y2="84.48" class="broken"></line>
+  <line x1="87.12" y1="31.68" x2="87.12" y2="73.920006" class="broken"></line>
+  <line x1="92.4" y1="31.68" x2="92.4" y2="84.48" class="broken"></line>
+  <text x="96.36" y="39.600002" >A</text>
+  <text x="69.96" y="50.160004" >A</text>
+  <line x1="76.560005" y1="42.24" x2="76.560005" y2="95.04" class="broken"></line>
+  <line x1="97.68" y1="42.24" x2="97.68" y2="95.04" class="broken"></line>
+  <text x="101.64001" y="50.160004" >A</text>
+  <text x="64.68" y="60.72" >A</text>
+  <line x1="71.28001" y1="52.800003" x2="71.28001" y2="105.600006" class="broken"></line>
+  <line x1="102.96001" y1="52.800003" x2="102.96001" y2="105.600006" class="broken"></line>
+  <text x="106.920006" y="60.72" >A</text>
+  <text x="59.4" y="71.28001" >A</text>
+  <line x1="66" y1="63.36" x2="66" y2="116.16" class="broken"></line>
+  <line x1="108.240005" y1="63.36" x2="108.240005" y2="116.16" class="broken"></line>
+  <text x="112.200005" y="71.28001" >A</text>
+  <text x="54.120003" y="81.840004" >A</text>
+  <line x1="60.72" y1="73.920006" x2="60.72" y2="137.28" class="broken"></line>
+  <text x="85.8" y="81.840004" >A</text>
+  <line x1="113.520004" y1="73.920006" x2="113.520004" y2="137.28" class="broken"></line>
+  <text x="117.48" y="81.840004" >A</text>
+  <text x="48.84" y="92.4" >A</text>
+  <line x1="55.440002" y1="84.48" x2="55.440002" y2="137.28" class="broken"></line>
+  <text x="80.520004" y="92.4" >A</text>
+  <text x="91.08" y="92.4" >A</text>
+  <line x1="118.8" y1="84.48" x2="118.8" y2="137.28" class="broken"></line>
+  <text x="122.76" y="92.4" >A</text>
+  <text x="43.56" y="102.96001" >A</text>
+  <line x1="50.160004" y1="95.04" x2="50.160004" y2="147.84001" class="broken"></line>
+  <text x="75.240005" y="102.96001" >A</text>
+  <text x="96.36" y="102.96001" >A</text>
+  <line x1="124.08" y1="95.04" x2="124.08" y2="147.84001" class="broken"></line>
+  <text x="128.04001" y="102.96001" >A</text>
+  <text x="38.280003" y="113.520004" >A</text>
+  <line x1="44.88" y1="105.600006" x2="44.88" y2="158.40001" class="broken"></line>
+  <text x="69.96" y="113.520004" >A</text>
+  <text x="101.64001" y="113.520004" >A</text>
+  <line x1="129.36" y1="105.600006" x2="129.36" y2="158.40001" class="broken"></line>
+  <text x="133.32" y="113.520004" >A</text>
+  <text x="33" y="124.08" >A</text>
+  <line x1="39.600002" y1="116.16" x2="39.600002" y2="168.96" class="broken"></line>
+  <text x="64.68" y="124.08" >AAAAAAAAA</text>
+  <line x1="134.64" y1="116.16" x2="134.64" y2="168.96" class="broken"></line>
+  <text x="138.6" y="124.08" >A</text>
+  <text x="27.720001" y="134.64" >A</text>
+  <line x1="34.32" y1="126.72" x2="34.32" y2="179.52" class="broken"></line>
+  <text x="64.68" y="134.64" >:::::::::</text>
+  <line x1="139.92" y1="126.72" x2="139.92" y2="179.52" class="broken"></line>
+  <text x="143.88" y="134.64" >A</text>
+  <text x="22.44" y="145.20001" >A</text>
+  <line x1="29.04" y1="137.28" x2="29.04" y2="179.52" class="broken"></line>
+  <text x="54.120003" y="145.20001" >AAAAAAAAAAAAA</text>
+  <line x1="145.20001" y1="137.28" x2="145.20001" y2="179.52" class="broken"></line>
+  <text x="149.16" y="145.20001" >A</text>
+  <text x="17.16" y="155.76001" >A</text>
+  <line x1="23.76" y1="147.84001" x2="23.76" y2="179.52" class="broken"></line>
+  <text x="48.84" y="155.76001" >A</text>
+  <text x="122.76" y="155.76001" >A</text>
+  <line x1="150.48001" y1="147.84001" x2="150.48001" y2="179.52" class="broken"></line>
+  <text x="154.44" y="155.76001" >A</text>
+  <text x="11.88" y="166.32" >A</text>
+  <line x1="18.480001" y1="158.40001" x2="18.480001" y2="179.52" class="broken"></line>
+  <text x="43.56" y="166.32" >A</text>
+  <text x="128.04001" y="166.32" >A</text>
+  <line x1="155.76001" y1="158.40001" x2="155.76001" y2="179.52" class="broken"></line>
+  <text x="159.72" y="166.32" >A</text>
+  <text x="6.6000004" y="176.88" >A:</text>
+  <text x="38.280003" y="176.88" >A</text>
+  <text x="133.32" y="176.88" >A</text>
+  <text x="159.72" y="176.88" >:A</text>
+  <text x="1.32" y="187.44" >AAAAAAA</text>
+  <text x="138.6" y="187.44" >AAAAAAA</text>
+</svg>
diff --git a/db/contributed/fill/eftipiti.flf b/static/db/contributed/fill/eftipiti.flf
similarity index 100%
rename from db/contributed/fill/eftipiti.flf
rename to static/db/contributed/fill/eftipiti.flf
diff --git a/static/db/contributed/fill/eftipiti.svg b/static/db/contributed/fill/eftipiti.svg
new file mode 100644
index 0000000..9d38b3a
--- /dev/null
+++ b/static/db/contributed/fill/eftipiti.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="31.68" 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="21.12" height="31.68"></rect>
+  <g>
+    <line x1="5.28" y1="10.56" x2="10.56" y2="10.56" class="solid"></line>
+    <line x1="5.28" y1="10.56" x2="0" y2="21.12" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="15.84" y2="21.12" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/fill/fraktur.flf b/static/db/contributed/fill/fraktur.flf
similarity index 100%
rename from db/contributed/fill/fraktur.flf
rename to static/db/contributed/fill/fraktur.flf
diff --git a/static/db/contributed/fill/fraktur.svg b/static/db/contributed/fill/fraktur.svg
new file mode 100644
index 0000000..0d4aa82
--- /dev/null
+++ b/static/db/contributed/fill/fraktur.svg
@@ -0,0 +1,147 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="105.600006" height="137.28" 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="105.600006" height="137.28"></rect>
+  <text x="27.720001" y="7.92" >..</text>
+  <text x="11.88" y="18.480001" >:</text>
+  <line x1="18.480001" y1="15.84" x2="23.76" y2="15.84" class="solid"></line>
+  <text x="27.720001" y="18.480001" >888H:</text>
+  <text x="59.4" y="18.480001" >`:</text>
+  <text x="75.240005" y="18.480001" >.xH</text>
+  <text x="6.6000004" y="29.04" >X</text>
+  <text x="27.720001" y="29.04" >`8888k</text>
+  <line x1="66" y1="21.12" x2="66" y2="26.400002" class="solid"></line>
+  <text x="69.96" y="29.04" >X888</text>
+  <text x="1.32" y="39.600002" >&#39;8hx</text>
+  <text x="33" y="39.600002" >48888</text>
+  <text x="64.68" y="39.600002" >?8888</text>
+  <text x="1.32" y="50.160004" >&#39;8888</text>
+  <text x="33" y="50.160004" >&#39;8888</text>
+  <text x="64.68" y="50.160004" >`8888</text>
+  <text x="6.6000004" y="60.72" >%888&gt;&#39;8888</text>
+  <text x="69.96" y="60.72" >8888</text>
+  <text x="69.96" y="71.28001" >8888</text>
+  <text x="11.88" y="81.840004" >.</text>
+  <line x1="15.84" y1="79.200005" x2="21.12" y2="79.200005" class="solid"></line>
+  <text x="22.44" y="81.840004" >`</text>
+  <text x="33" y="81.840004" >X*&quot;</text>
+  <text x="69.96" y="81.840004" >8888</text>
+  <text x="22.44" y="92.4" >.xhx.</text>
+  <text x="69.96" y="92.4" >8888</text>
+  <text x="11.88" y="102.96001" >.H88888h</text>
+  <text x="64.68" y="102.96001" >`8888.</text>
+  <polygon points="95.04,97.68 100.32001,100.32001 95.04,102.96001" class="filled"></polygon>
+  <text x="6.6000004" y="113.520004" >.</text>
+  <line x1="10.56" y1="110.880005" x2="15.84" y2="110.880005" class="broken"></line>
+  <text x="27.720001" y="113.520004" >`%88!`</text>
+  <text x="64.68" y="113.520004" >&#39;888</text>
+  <line x1="87.12" y1="110.880005" x2="87.12" y2="110.880005" class="solid end_marked_circle"></line>
+  <line x1="89.76" y1="110.880005" x2="95.04" y2="110.880005" class="broken"></line>
+  <text x="38.280003" y="124.08" >`</text>
+  <text x="80.520004" y="124.08" >&quot;</text>
+  <text x="91.08" y="18.480001" ></text>
+  <text x="17.16" y="71.28001" >8 &#39;888</text>
+  <text x="43.56" y="124.08" >     </text>
+  <g>
+    <path d="M 55.440002,100.32001 A 5.28,5.28 0,0,0 50.160004,105.600006" class="nofill"></path>
+    <line x1="55.440002" y1="100.32001" x2="63.36" y2="100.32001" class="broken"></line>
+  </g>
+  <g>
+    <path d="M 58.08,100.32001 A 2.64,2.64 0,0,0 55.440002,102.96001" class="nofill"></path>
+    <line x1="55.440002" y1="102.96001" x2="55.440002" y2="105.600006" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/fill/gradient.flf b/static/db/contributed/fill/gradient.flf
similarity index 100%
rename from db/contributed/fill/gradient.flf
rename to static/db/contributed/fill/gradient.flf
diff --git a/static/db/contributed/fill/gradient.svg b/static/db/contributed/fill/gradient.svg
new file mode 100644
index 0000000..2c3c679
--- /dev/null
+++ b/static/db/contributed/fill/gradient.svg
@@ -0,0 +1,125 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="95.04" 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="52.800003" height="95.04"></rect>
+  <text x="1.32" y="7.92" >.eeeeee.</text>
+  <line x1="44.88" y1="7.92" x2="44.88" y2="10.56" class="solid"></line>
+  <text x="1.32" y="18.480001" >@@@@@@@@:</text>
+  <text x="1.32" y="29.04" >%%%</text>
+  <line x1="15.84" y1="26.400002" x2="26.400002" y2="26.400002" class="solid"></line>
+  <text x="27.720001" y="29.04" >%%%</text>
+  <line x1="42.24" y1="26.400002" x2="47.52" y2="26.400002" class="solid"></line>
+  <text x="1.32" y="39.600002" >&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;</text>
+  <line x1="44.88" y1="36.960003" x2="44.88" y2="42.24" class="solid"></line>
+  <line x1="2.64" y1="42.24" x2="2.64" y2="73.920006" class="broken"></line>
+  <line x1="7.92" y1="42.24" x2="7.92" y2="73.920006" class="broken"></line>
+  <line x1="13.200001" y1="42.24" x2="13.200001" y2="73.920006" class="broken"></line>
+  <line x1="18.480001" y1="42.24" x2="18.480001" y2="52.800003" class="solid"></line>
+  <line x1="23.76" y1="42.24" x2="23.76" y2="52.800003" class="solid"></line>
+  <line x1="29.04" y1="42.24" x2="29.04" y2="73.920006" class="broken"></line>
+  <line x1="34.32" y1="42.24" x2="34.32" y2="73.920006" class="broken"></line>
+  <line x1="39.600002" y1="42.24" x2="39.600002" y2="73.920006" class="broken"></line>
+  <text x="43.56" y="50.160004" >*</text>
+  <line x1="15.84" y1="56.760002" x2="26.400002" y2="56.760002" class="solid"></line>
+  <line x1="15.84" y1="59.4" x2="26.400002" y2="59.4" class="solid"></line>
+  <line x1="42.24" y1="56.760002" x2="47.52" y2="56.760002" class="solid"></line>
+  <line x1="42.24" y1="59.4" x2="47.52" y2="59.4" class="solid"></line>
+  <rect x="15.84" y="66" width="5.2800007" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="21.12" y="66" width="5.2800007" height="5.2800064" class="solid filled" rx="0"></rect>
+  <text x="43.56" y="71.28001" >#</text>
+  <text x="1.32" y="81.840004" >...@@...@</text>
+</svg>
diff --git a/db/contributed/fill/jazmine.flf b/static/db/contributed/fill/jazmine.flf
similarity index 100%
rename from db/contributed/fill/jazmine.flf
rename to static/db/contributed/fill/jazmine.flf
diff --git a/static/db/contributed/fill/jazmine.svg b/static/db/contributed/fill/jazmine.svg
new file mode 100644
index 0000000..8c335ec
--- /dev/null
+++ b/static/db/contributed/fill/jazmine.svg
@@ -0,0 +1,118 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="116.16" 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="52.800003" height="116.16"></rect>
+  <text x="27.720001" y="18.480001" >.oo</text>
+  <text x="22.44" y="29.04" >.P</text>
+  <text x="38.280003" y="29.04" >8</text>
+  <text x="17.16" y="39.600002" >.P</text>
+  <text x="38.280003" y="39.600002" >8</text>
+  <text x="11.88" y="50.160004" >oPooo8</text>
+  <text x="6.6000004" y="60.72" >.P</text>
+  <text x="38.280003" y="60.72" >8</text>
+  <text x="1.32" y="71.28001" >.P</text>
+  <text x="38.280003" y="71.28001" >8</text>
+  <line x1="2.64" y1="81.840004" x2="2.64" y2="105.600006" class="broken"></line>
+  <line x1="7.92" y1="81.840004" x2="7.92" y2="105.600006" class="broken"></line>
+  <line x1="13.200001" y1="73.920006" x2="13.200001" y2="105.600006" class="broken"></line>
+  <line x1="18.480001" y1="73.920006" x2="18.480001" y2="105.600006" class="broken"></line>
+  <line x1="23.76" y1="73.920006" x2="23.76" y2="105.600006" class="broken"></line>
+  <line x1="29.04" y1="73.920006" x2="29.04" y2="105.600006" class="broken"></line>
+  <line x1="34.32" y1="73.920006" x2="34.32" y2="105.600006" class="broken"></line>
+  <line x1="39.600002" y1="81.840004" x2="39.600002" y2="105.600006" class="broken"></line>
+  <line x1="44.88" y1="81.840004" x2="44.88" y2="105.600006" class="broken"></line>
+</svg>
diff --git a/db/contributed/fill/letters.flf b/static/db/contributed/fill/letters.flf
similarity index 100%
rename from db/contributed/fill/letters.flf
rename to static/db/contributed/fill/letters.flf
diff --git a/static/db/contributed/fill/letters.svg b/static/db/contributed/fill/letters.svg
new file mode 100644
index 0000000..47f7535
--- /dev/null
+++ b/static/db/contributed/fill/letters.svg
@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="63.36" 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="42.24" height="63.36"></rect>
+  <text x="11.88" y="7.92" >AAA</text>
+  <text x="6.6000004" y="18.480001" >AAAAA</text>
+  <text x="1.32" y="29.04" >AA</text>
+  <text x="27.720001" y="29.04" >AA</text>
+  <text x="1.32" y="39.600002" >AAAAAAA</text>
+  <text x="1.32" y="50.160004" >AA</text>
+  <text x="27.720001" y="50.160004" >AA</text>
+</svg>
diff --git a/db/contributed/fill/lockergnome.flf b/static/db/contributed/fill/lockergnome.flf
similarity index 100%
rename from db/contributed/fill/lockergnome.flf
rename to static/db/contributed/fill/lockergnome.flf
diff --git a/static/db/contributed/fill/lockergnome.svg b/static/db/contributed/fill/lockergnome.svg
new file mode 100644
index 0000000..a42d1be
--- /dev/null
+++ b/static/db/contributed/fill/lockergnome.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="42.24" 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="42.24" height="42.24"></rect>
+  <line x1="7.92" y1="0" x2="7.92" y2="31.68" class="broken"></line>
+  <line x1="13.200001" y1="0" x2="13.200001" y2="31.68" class="broken"></line>
+  <text x="17.16" y="7.92" >:</text>
+  <line x1="23.76" y1="0" x2="23.76" y2="31.68" class="broken"></line>
+  <line x1="2.64" y1="10.56" x2="2.64" y2="31.68" class="broken"></line>
+  <text x="17.16" y="18.480001" >,</text>
+  <text x="33" y="18.480001" >|</text>
+  <line x1="34.32" y1="21.12" x2="34.32" y2="31.68" class="solid"></line>
+  <g>
+    <line x1="26.400002" y1="0" x2="31.68" y2="10.56" class="solid"></line>
+    <line x1="29.04" y1="5.28" x2="29.04" y2="31.68" class="broken"></line>
+  </g>
+</svg>
diff --git a/db/contributed/fill/nancyj-fancy.flf b/static/db/contributed/fill/nancyj-fancy.flf
similarity index 100%
rename from db/contributed/fill/nancyj-fancy.flf
rename to static/db/contributed/fill/nancyj-fancy.flf
diff --git a/static/db/contributed/fill/nancyj-fancy.svg b/static/db/contributed/fill/nancyj-fancy.svg
new file mode 100644
index 0000000..a057cb3
--- /dev/null
+++ b/static/db/contributed/fill/nancyj-fancy.svg
@@ -0,0 +1,119 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="68.64" height="84.48" 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="68.64" height="84.48"></rect>
+  <text x="1.32" y="7.92" >MMP</text>
+  <text x="48.84" y="7.92" >&quot;MM</text>
+  <text x="1.32" y="18.480001" >M&#39;</text>
+  <text x="17.16" y="18.480001" >.mmmm</text>
+  <text x="54.120003" y="18.480001" >MM</text>
+  <text x="1.32" y="29.04" >M</text>
+  <text x="54.120003" y="29.04" >`M</text>
+  <text x="1.32" y="39.600002" >M</text>
+  <text x="17.16" y="39.600002" >MMMMM</text>
+  <text x="54.120003" y="39.600002" >MM</text>
+  <text x="1.32" y="50.160004" >M</text>
+  <text x="17.16" y="50.160004" >MMMMM</text>
+  <text x="54.120003" y="50.160004" >MM</text>
+  <text x="1.32" y="60.72" >M</text>
+  <text x="17.16" y="60.72" >MMMMM</text>
+  <text x="54.120003" y="60.72" >MM</text>
+  <text x="1.32" y="71.28001" >MMMMMMMMMMMM</text>
+  <text x="17.16" y="7.92" ></text>
+  <text x="27.720001" y="7.92" ></text>
+  <text x="38.280003" y="7.92" ></text>
+</svg>
diff --git a/db/contributed/fill/nancyj-underlined.flf b/static/db/contributed/fill/nancyj-underlined.flf
similarity index 100%
rename from db/contributed/fill/nancyj-underlined.flf
rename to static/db/contributed/fill/nancyj-underlined.flf
diff --git a/static/db/contributed/fill/nancyj-underlined.svg b/static/db/contributed/fill/nancyj-underlined.svg
new file mode 100644
index 0000000..6f94407
--- /dev/null
+++ b/static/db/contributed/fill/nancyj-underlined.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="84.48" 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="63.36" height="84.48"></rect>
+  <text x="6.6000004" y="7.92" >.d888888</text>
+  <text x="1.32" y="18.480001" >d8&#39;</text>
+  <text x="38.280003" y="18.480001" >88</text>
+  <text x="1.32" y="29.04" >88aaaaa88a</text>
+  <text x="1.32" y="39.600002" >88</text>
+  <text x="38.280003" y="39.600002" >88</text>
+  <text x="1.32" y="50.160004" >88</text>
+  <text x="38.280003" y="50.160004" >88</text>
+  <text x="1.32" y="60.72" >88</text>
+  <text x="38.280003" y="60.72" >88</text>
+  <text x="1.32" y="71.28001" >ooooooooooo</text>
+</svg>
diff --git a/db/contributed/fill/nancyj.flf b/static/db/contributed/fill/nancyj.flf
similarity index 100%
rename from db/contributed/fill/nancyj.flf
rename to static/db/contributed/fill/nancyj.flf
diff --git a/static/db/contributed/fill/nancyj.svg b/static/db/contributed/fill/nancyj.svg
new file mode 100644
index 0000000..ab72dcc
--- /dev/null
+++ b/static/db/contributed/fill/nancyj.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="73.920006" 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="58.08" height="73.920006"></rect>
+  <text x="6.6000004" y="7.92" >.d888888</text>
+  <text x="1.32" y="18.480001" >d8&#39;</text>
+  <text x="38.280003" y="18.480001" >88</text>
+  <text x="1.32" y="29.04" >88aaaaa88a</text>
+  <text x="1.32" y="39.600002" >88</text>
+  <text x="38.280003" y="39.600002" >88</text>
+  <text x="1.32" y="50.160004" >88</text>
+  <text x="38.280003" y="50.160004" >88</text>
+  <text x="1.32" y="60.72" >88</text>
+  <text x="38.280003" y="60.72" >88</text>
+</svg>
diff --git a/db/contributed/fill/nvscript.flf b/static/db/contributed/fill/nvscript.flf
similarity index 100%
rename from db/contributed/fill/nvscript.flf
rename to static/db/contributed/fill/nvscript.flf
diff --git a/static/db/contributed/fill/nvscript.svg b/static/db/contributed/fill/nvscript.svg
new file mode 100644
index 0000000..9976f52
--- /dev/null
+++ b/static/db/contributed/fill/nvscript.svg
@@ -0,0 +1,122 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100.32001" height="116.16" 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="100.32001" height="116.16"></rect>
+  <text x="59.4" y="7.92" >,ggg,</text>
+  <text x="54.120003" y="18.480001" >dP</text>
+  <text x="75.240005" y="18.480001" >8I</text>
+  <text x="48.84" y="29.04" >dP</text>
+  <text x="75.240005" y="29.04" >88</text>
+  <text x="43.56" y="39.600002" >dP</text>
+  <text x="75.240005" y="39.600002" >88</text>
+  <text x="38.280003" y="50.160004" >,8&#39;</text>
+  <text x="75.240005" y="50.160004" >88</text>
+  <text x="38.280003" y="60.72" >d88888888</text>
+  <line x1="5.28" y1="73.920006" x2="15.84" y2="73.920006" class="solid"></line>
+  <text x="33" y="71.28001" >,8&quot;</text>
+  <text x="75.240005" y="71.28001" >88</text>
+  <text x="1.32" y="81.840004" >dP&quot;</text>
+  <text x="27.720001" y="81.840004" >,8P</text>
+  <text x="75.240005" y="81.840004" >Y8</text>
+  <text x="1.32" y="92.4" >Yb,</text>
+  <line x1="15.84" y1="95.04" x2="21.12" y2="95.04" class="solid"></line>
+  <text x="22.44" y="92.4" >,dP</text>
+  <text x="75.240005" y="92.4" >`8b,</text>
+  <text x="80.520004" y="102.96001" >`Y8</text>
+  <text x="64.68" y="18.480001" ></text>
+  <text x="6.6000004" y="102.96001" >Y8P</text>
+</svg>
diff --git a/db/contributed/fill/o8.flf b/static/db/contributed/fill/o8.flf
similarity index 100%
rename from db/contributed/fill/o8.flf
rename to static/db/contributed/fill/o8.flf
diff --git a/static/db/contributed/fill/o8.svg b/static/db/contributed/fill/o8.svg
new file mode 100644
index 0000000..d6eeca1
--- /dev/null
+++ b/static/db/contributed/fill/o8.svg
@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="63.36" 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="63.36" height="63.36"></rect>
+  <text x="27.720001" y="7.92" >o</text>
+  <text x="22.44" y="18.480001" >888</text>
+  <text x="17.16" y="29.04" >8</text>
+  <text x="33" y="29.04" >88</text>
+  <text x="11.88" y="39.600002" >8oooo88</text>
+  <text x="1.32" y="50.160004" >o88o</text>
+  <text x="33" y="50.160004" >o888o</text>
+</svg>
diff --git a/db/contributed/fill/pebbles.flf b/static/db/contributed/fill/pebbles.flf
similarity index 100%
rename from db/contributed/fill/pebbles.flf
rename to static/db/contributed/fill/pebbles.flf
diff --git a/static/db/contributed/fill/pebbles.svg b/static/db/contributed/fill/pebbles.svg
new file mode 100644
index 0000000..1f726b1
--- /dev/null
+++ b/static/db/contributed/fill/pebbles.svg
@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="95.04" 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="47.52" height="95.04"></rect>
+  <text x="17.16" y="7.92" >Oo</text>
+  <text x="11.88" y="18.480001" >o</text>
+  <text x="27.720001" y="18.480001" >O</text>
+  <text x="6.6000004" y="29.04" >O</text>
+  <text x="33" y="29.04" >o</text>
+  <text x="1.32" y="39.600002" >oOooOoOo</text>
+  <text x="1.32" y="50.160004" >o</text>
+  <text x="38.280003" y="50.160004" >O</text>
+  <text x="1.32" y="60.72" >O</text>
+  <text x="38.280003" y="60.72" >o</text>
+  <text x="1.32" y="71.28001" >o</text>
+  <text x="38.280003" y="71.28001" >O</text>
+  <text x="1.32" y="81.840004" >O.</text>
+  <text x="38.280003" y="81.840004" >O</text>
+</svg>
diff --git a/db/contributed/fill/poison.flf b/static/db/contributed/fill/poison.flf
similarity index 100%
rename from db/contributed/fill/poison.flf
rename to static/db/contributed/fill/poison.flf
diff --git a/static/db/contributed/fill/poison.svg b/static/db/contributed/fill/poison.svg
new file mode 100644
index 0000000..e8598b5
--- /dev/null
+++ b/static/db/contributed/fill/poison.svg
@@ -0,0 +1,116 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="126.72" 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="47.52" height="126.72"></rect>
+  <text x="6.6000004" y="18.480001" >@@@@@@</text>
+  <text x="1.32" y="29.04" >@@@@@@@@</text>
+  <text x="1.32" y="39.600002" >@@</text>
+  <line x1="13.200001" y1="31.68" x2="13.200001" y2="52.800003" class="broken"></line>
+  <text x="27.720001" y="39.600002" >@@@</text>
+  <text x="1.32" y="50.160004" >!@</text>
+  <text x="27.720001" y="50.160004" >@!@</text>
+  <text x="1.32" y="60.72" >@</text>
+  <line x1="7.92" y1="52.800003" x2="7.92" y2="116.16" class="broken"></line>
+  <text x="11.88" y="60.72" >@!@</text>
+  <line x1="29.04" y1="52.800003" x2="29.04" y2="116.16" class="broken"></line>
+  <text x="33" y="60.72" >@</text>
+  <line x1="39.600002" y1="52.800003" x2="39.600002" y2="116.16" class="broken"></line>
+  <line x1="2.64" y1="63.36" x2="2.64" y2="105.600006" class="broken"></line>
+  <line x1="13.200001" y1="63.36" x2="13.200001" y2="95.04" class="broken"></line>
+  <text x="17.16" y="71.28001" >@!</text>
+  <line x1="34.32" y1="63.36" x2="34.32" y2="105.600006" class="broken"></line>
+</svg>
diff --git a/db/contributed/fill/roman.flf b/static/db/contributed/fill/roman.flf
similarity index 100%
rename from db/contributed/fill/roman.flf
rename to static/db/contributed/fill/roman.flf
diff --git a/static/db/contributed/fill/roman.svg b/static/db/contributed/fill/roman.svg
new file mode 100644
index 0000000..5ae6ac4
--- /dev/null
+++ b/static/db/contributed/fill/roman.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <text x="33" y="7.92" >.o.</text>
+  <text x="27.720001" y="18.480001" >.888.</text>
+  <text x="22.44" y="29.04" >.8&quot;888.</text>
+  <text x="17.16" y="39.600002" >.8&#39;</text>
+  <text x="38.280003" y="39.600002" >`888.</text>
+  <text x="11.88" y="50.160004" >.88ooo8888.</text>
+  <text x="6.6000004" y="60.72" >.8&#39;</text>
+  <text x="48.84" y="60.72" >`888.</text>
+  <text x="1.32" y="71.28001" >o88o</text>
+  <text x="48.84" y="71.28001" >o8888o</text>
+</svg>
diff --git a/db/contributed/fill/rowancap.flf b/static/db/contributed/fill/rowancap.flf
similarity index 100%
rename from db/contributed/fill/rowancap.flf
rename to static/db/contributed/fill/rowancap.flf
diff --git a/static/db/contributed/fill/rowancap.svg b/static/db/contributed/fill/rowancap.svg
new file mode 100644
index 0000000..67daf29
--- /dev/null
+++ b/static/db/contributed/fill/rowancap.svg
@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="63.36" 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="58.08" height="63.36"></rect>
+  <text x="22.44" y="7.92" >.aMMMb</text>
+  <text x="17.16" y="18.480001" >dMP&quot;dMP</text>
+  <text x="11.88" y="29.04" >dMMMMMP</text>
+  <text x="6.6000004" y="39.600002" >dMP</text>
+  <text x="27.720001" y="39.600002" >dMP</text>
+  <text x="1.32" y="50.160004" >dMP</text>
+  <text x="22.44" y="50.160004" >dMP</text>
+</svg>
diff --git a/db/contributed/fill/rozzo.flf b/static/db/contributed/fill/rozzo.flf
similarity index 100%
rename from db/contributed/fill/rozzo.flf
rename to static/db/contributed/fill/rozzo.flf
diff --git a/static/db/contributed/fill/rozzo.svg b/static/db/contributed/fill/rozzo.svg
new file mode 100644
index 0000000..c8cd61a
--- /dev/null
+++ b/static/db/contributed/fill/rozzo.svg
@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="73.920006" height="63.36" 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="73.920006" height="63.36"></rect>
+  <text x="22.44" y="7.92" >e</text>
+  <text x="33" y="7.92" >Y8b</text>
+  <text x="17.16" y="18.480001" >d8b</text>
+  <text x="38.280003" y="18.480001" >Y8b</text>
+  <text x="11.88" y="29.04" >d888b</text>
+  <text x="43.56" y="29.04" >Y8b</text>
+  <text x="6.6000004" y="39.600002" >d888888888b</text>
+  <text x="1.32" y="50.160004" >d8888888b</text>
+  <text x="54.120003" y="50.160004" >Y8b</text>
+</svg>
diff --git a/db/contributed/fill/sblood.flf b/static/db/contributed/fill/sblood.flf
similarity index 100%
rename from db/contributed/fill/sblood.flf
rename to static/db/contributed/fill/sblood.flf
diff --git a/static/db/contributed/fill/sblood.svg b/static/db/contributed/fill/sblood.svg
new file mode 100644
index 0000000..b56d644
--- /dev/null
+++ b/static/db/contributed/fill/sblood.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="63.36" 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="52.800003" height="63.36"></rect>
+  <text x="11.88" y="7.92" >@@@@@@</text>
+  <text x="6.6000004" y="18.480001" >@@!</text>
+  <text x="33" y="18.480001" >@@@</text>
+  <text x="6.6000004" y="29.04" >@</text>
+  <line x1="13.200001" y1="21.12" x2="13.200001" y2="52.800003" class="broken"></line>
+  <text x="17.16" y="29.04" >@!@</text>
+  <line x1="34.32" y1="21.12" x2="34.32" y2="52.800003" class="broken"></line>
+  <text x="38.280003" y="29.04" >@</text>
+  <line x1="44.88" y1="21.12" x2="44.88" y2="52.800003" class="broken"></line>
+  <text x="6.6000004" y="39.600002" >!</text>
+  <text x="17.16" y="39.600002" >:</text>
+  <text x="38.280003" y="39.600002" >!</text>
+</svg>
diff --git a/db/contributed/fill/slide.flf b/static/db/contributed/fill/slide.flf
similarity index 100%
rename from db/contributed/fill/slide.flf
rename to static/db/contributed/fill/slide.flf
diff --git a/static/db/contributed/fill/slide.svg b/static/db/contributed/fill/slide.svg
new file mode 100644
index 0000000..002fe57
--- /dev/null
+++ b/static/db/contributed/fill/slide.svg
@@ -0,0 +1,117 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="63.36" 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="36.960003" height="63.36"></rect>
+  <text x="11.88" y="7.92" >#</text>
+  <line x1="18.480001" y1="0" x2="18.480001" y2="10.56" class="solid"></line>
+  <rect x="5.28" y="13.200001" width="5.28" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="18.480001" x2="7.92" y2="23.76" class="solid"></line>
+  <text x="11.88" y="18.480001" >HH</text>
+  <line x1="23.76" y1="10.56" x2="23.76" y2="52.800003" class="solid"></line>
+  <rect x="0" y="23.76" width="5.28" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="29.04" x2="2.64" y2="34.32" class="solid"></line>
+  <rect x="5.28" y="23.76" width="5.28" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="29.04" x2="7.92" y2="34.32" class="solid"></line>
+  <line x1="29.04" y1="21.12" x2="29.04" y2="52.800003" class="solid"></line>
+  <rect x="0" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="39.600002" x2="2.64" y2="44.88" class="solid"></line>
+  <rect x="5.28" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="39.600002" x2="7.92" y2="44.88" class="solid"></line>
+  <text x="11.88" y="39.600002" >HH</text>
+  <rect x="0" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="5.28" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+</svg>
diff --git a/db/contributed/fill/stellar.flf b/static/db/contributed/fill/stellar.flf
similarity index 100%
rename from db/contributed/fill/stellar.flf
rename to static/db/contributed/fill/stellar.flf
diff --git a/static/db/contributed/fill/stellar.svg b/static/db/contributed/fill/stellar.svg
new file mode 100644
index 0000000..a826262
--- /dev/null
+++ b/static/db/contributed/fill/stellar.svg
@@ -0,0 +1,112 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <text x="33" y="7.92" >`.</text>
+  <text x="27.720001" y="18.480001" >`.</text>
+  <text x="43.56" y="18.480001" >..</text>
+  <text x="22.44" y="29.04" >`.</text>
+  <text x="43.56" y="29.04" >`..</text>
+  <text x="17.16" y="39.600002" >`..</text>
+  <text x="48.84" y="39.600002" >`..</text>
+  <text x="11.88" y="50.160004" >`......</text>
+  <text x="54.120003" y="50.160004" >`..</text>
+  <text x="6.6000004" y="60.72" >`..</text>
+  <text x="59.4" y="60.72" >`..</text>
+  <text x="1.32" y="71.28001" >`..</text>
+  <text x="64.68" y="71.28001" >`..</text>
+</svg>
diff --git a/db/contributed/fill/tanja.flf b/static/db/contributed/fill/tanja.flf
similarity index 100%
rename from db/contributed/fill/tanja.flf
rename to static/db/contributed/fill/tanja.flf
diff --git a/static/db/contributed/fill/tanja.svg b/static/db/contributed/fill/tanja.svg
new file mode 100644
index 0000000..7c3f6f2
--- /dev/null
+++ b/static/db/contributed/fill/tanja.svg
@@ -0,0 +1,119 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="73.920006" 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="47.52" height="73.920006"></rect>
+  <text x="11.88" y="7.92" >A</text>
+  <path d="M 15.84,0 A 10.56,10.56 0,0,1 15.84,10.56" class="nofill"></path>
+  <text x="22.44" y="7.92" >aa</text>
+  <text x="6.6000004" y="18.480001" >A</text>
+  <path d="M 10.56,10.56 A 10.56,10.56 0,0,1 10.56,21.12" class="nofill"></path>
+  <text x="27.720001" y="18.480001" >aa</text>
+  <text x="1.32" y="29.04" >A</text>
+  <text x="33" y="29.04" >aa</text>
+  <text x="1.32" y="39.600002" >A</text>
+  <text x="11.88" y="39.600002" >aaaaaa</text>
+  <text x="1.32" y="50.160004" >A</text>
+  <text x="33" y="50.160004" >aa</text>
+  <text x="1.32" y="60.72" >A</text>
+  <text x="33" y="60.72" >aa</text>
+  <g>
+    <path d="M 5.28,21.12 A 10.56,10.56 0,0,1 5.28,31.68" class="nofill"></path>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,1 5.28,42.24" class="nofill"></path>
+    <path d="M 5.28,42.24 A 10.56,10.56 0,0,1 5.28,52.800003" class="nofill"></path>
+    <path d="M 5.28,52.800003 A 10.56,10.56 0,0,1 5.28,63.36" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/contributed/fill/thick.flf b/static/db/contributed/fill/thick.flf
similarity index 100%
rename from db/contributed/fill/thick.flf
rename to static/db/contributed/fill/thick.flf
diff --git a/static/db/contributed/fill/thick.svg b/static/db/contributed/fill/thick.svg
new file mode 100644
index 0000000..675021b
--- /dev/null
+++ b/static/db/contributed/fill/thick.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="52.800003" 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="47.52" height="52.800003"></rect>
+  <text x="17.16" y="7.92" >db</text>
+  <text x="11.88" y="18.480001" >dPYb</text>
+  <text x="6.6000004" y="29.04" >dPwwYb</text>
+  <text x="1.32" y="39.600002" >dP</text>
+  <text x="33" y="39.600002" >Yb</text>
+</svg>
diff --git a/db/contributed/fill/trek.flf b/static/db/contributed/fill/trek.flf
similarity index 100%
rename from db/contributed/fill/trek.flf
rename to static/db/contributed/fill/trek.flf
diff --git a/static/db/contributed/fill/trek.svg b/static/db/contributed/fill/trek.svg
new file mode 100644
index 0000000..3a8c4e9
--- /dev/null
+++ b/static/db/contributed/fill/trek.svg
@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="63.36" 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="52.800003" height="63.36"></rect>
+  <text x="11.88" y="7.92" >dBBBBBb</text>
+  <text x="38.280003" y="18.480001" >BB</text>
+  <text x="17.16" y="29.04" >dBP</text>
+  <text x="38.280003" y="29.04" >BB</text>
+  <text x="11.88" y="39.600002" >dBP</text>
+  <text x="38.280003" y="39.600002" >BB</text>
+  <text x="6.6000004" y="50.160004" >dBBBBBBB</text>
+</svg>
diff --git a/db/contributed/fill/univers.flf b/static/db/contributed/fill/univers.flf
similarity index 100%
rename from db/contributed/fill/univers.flf
rename to static/db/contributed/fill/univers.flf
diff --git a/static/db/contributed/fill/univers.svg b/static/db/contributed/fill/univers.svg
new file mode 100644
index 0000000..7c46c9c
--- /dev/null
+++ b/static/db/contributed/fill/univers.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="89.76" height="105.600006" 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="89.76" height="105.600006"></rect>
+  <text x="38.280003" y="18.480001" >db</text>
+  <text x="33" y="29.04" >d88b</text>
+  <text x="27.720001" y="39.600002" >d8&#39;`8b</text>
+  <text x="22.44" y="50.160004" >d8&#39;</text>
+  <text x="48.84" y="50.160004" >`8b</text>
+  <text x="17.16" y="60.72" >d8YaaaaY8b</text>
+  <text x="11.88" y="71.28001" >d8</text>
+  <text x="64.68" y="71.28001" >8b</text>
+  <text x="6.6000004" y="81.840004" >d8&#39;</text>
+  <text x="64.68" y="81.840004" >`8b</text>
+  <text x="1.32" y="92.4" >d8&#39;</text>
+  <text x="69.96" y="92.4" >`8b</text>
+  <text x="22.44" y="71.28001" ></text>
+  <text x="33" y="71.28001" ></text>
+  <text x="43.56" y="71.28001" ></text>
+  <text x="54.120003" y="71.28001" ></text>
+</svg>
diff --git a/db/contributed/fill/whimsy.flf b/static/db/contributed/fill/whimsy.flf
similarity index 100%
rename from db/contributed/fill/whimsy.flf
rename to static/db/contributed/fill/whimsy.flf
diff --git a/static/db/contributed/fill/whimsy.svg b/static/db/contributed/fill/whimsy.svg
new file mode 100644
index 0000000..9915636
--- /dev/null
+++ b/static/db/contributed/fill/whimsy.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="84.48" 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="58.08" height="84.48"></rect>
+  <text x="6.6000004" y="39.600002" >d888b8b</text>
+  <text x="1.32" y="50.160004" >d8P&#39;</text>
+  <text x="27.720001" y="50.160004" >?88</text>
+  <text x="1.32" y="60.72" >88b</text>
+  <text x="27.720001" y="60.72" >,88b</text>
+  <text x="1.32" y="71.28001" >`?88P&#39;`88b</text>
+</svg>
diff --git a/db/contributed/frame/pyramid.flf b/static/db/contributed/frame/pyramid.flf
similarity index 100%
rename from db/contributed/frame/pyramid.flf
rename to static/db/contributed/frame/pyramid.flf
diff --git a/db/contributed/frame/smkeyboard.flf b/static/db/contributed/frame/smkeyboard.flf
similarity index 100%
rename from db/contributed/frame/smkeyboard.flf
rename to static/db/contributed/frame/smkeyboard.flf
diff --git a/db/contributed/non-latin/katakana.flf b/static/db/contributed/non-latin/katakana.flf
similarity index 100%
rename from db/contributed/non-latin/katakana.flf
rename to static/db/contributed/non-latin/katakana.flf
diff --git a/db/contributed/non-latin/runyc.flf b/static/db/contributed/non-latin/runyc.flf
similarity index 100%
rename from db/contributed/non-latin/runyc.flf
rename to static/db/contributed/non-latin/runyc.flf
diff --git a/db/contributed/non-latin/tsalagi.flc b/static/db/contributed/non-latin/tsalagi.flc
similarity index 100%
rename from db/contributed/non-latin/tsalagi.flc
rename to static/db/contributed/non-latin/tsalagi.flc
diff --git a/db/contributed/non-latin/tsalagi.flf b/static/db/contributed/non-latin/tsalagi.flf
similarity index 100%
rename from db/contributed/non-latin/tsalagi.flf
rename to static/db/contributed/non-latin/tsalagi.flf
diff --git a/db/contributed/outline/5lineoblique.flf b/static/db/contributed/outline/5lineoblique.flf
similarity index 100%
rename from db/contributed/outline/5lineoblique.flf
rename to static/db/contributed/outline/5lineoblique.flf
diff --git a/static/db/contributed/outline/5lineoblique.svg b/static/db/contributed/outline/5lineoblique.svg
new file mode 100644
index 0000000..58cc08b
--- /dev/null
+++ b/static/db/contributed/outline/5lineoblique.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="84.48" 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="58.08" height="84.48"></rect>
+  <line x1="26.400002" y1="21.12" x2="0" y2="73.920006" class="solid"></line>
+  <line x1="15.84" y1="52.800003" x2="5.28" y2="73.920006" class="solid"></line>
+  <line x1="50.160004" y1="21.12" x2="50.160004" y2="73.920006" class="solid"></line>
+  <g>
+    <line x1="31.68" y1="21.12" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="39.600002" y1="21.12" x2="39.600002" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="39.600002" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="52.800003" x2="39.600002" y2="52.800003" class="solid"></line>
+    <line x1="39.600002" y1="52.800003" x2="39.600002" y2="73.920006" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/outline/double.flf b/static/db/contributed/outline/double.flf
similarity index 100%
rename from db/contributed/outline/double.flf
rename to static/db/contributed/outline/double.flf
diff --git a/static/db/contributed/outline/double.svg b/static/db/contributed/outline/double.svg
new file mode 100644
index 0000000..72f4ae1
--- /dev/null
+++ b/static/db/contributed/outline/double.svg
@@ -0,0 +1,116 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="52.800003" 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="31.68" height="52.800003"></rect>
+  <text x="1.32" y="29.04" >|</text>
+  <line x1="10.56" y1="25.080002" x2="15.84" y2="25.080002" class="solid"></line>
+  <line x1="10.56" y1="27.720001" x2="15.84" y2="27.720001" class="solid"></line>
+  <text x="22.44" y="29.04" >|</text>
+  <line x1="2.64" y1="31.68" x2="2.64" y2="42.24" class="solid"></line>
+  <line x1="23.76" y1="31.68" x2="23.76" y2="42.24" class="solid"></line>
+  <g>
+    <line x1="5.28" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="5.28" y1="10.56" x2="2.64" y2="15.84" class="solid"></line>
+    <line x1="2.64" y1="15.84" x2="2.64" y2="21.12" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="7.92" y2="15.84" class="solid"></line>
+    <line x1="7.92" y1="15.84" x2="7.92" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="18.480001" y2="15.84" class="solid"></line>
+    <line x1="18.480001" y1="15.84" x2="18.480001" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="23.76" y2="15.84" class="solid"></line>
+    <line x1="23.76" y1="15.84" x2="23.76" y2="21.12" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/outline/eftifont.flf b/static/db/contributed/outline/eftifont.flf
similarity index 100%
rename from db/contributed/outline/eftifont.flf
rename to static/db/contributed/outline/eftifont.flf
diff --git a/static/db/contributed/outline/eftifont.svg b/static/db/contributed/outline/eftifont.svg
new file mode 100644
index 0000000..19eabd7
--- /dev/null
+++ b/static/db/contributed/outline/eftifont.svg
@@ -0,0 +1,116 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="52.800003" 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="31.68" height="52.800003"></rect>
+  <text x="1.32" y="29.04" >|</text>
+  <text x="11.88" y="29.04" >o</text>
+  <text x="22.44" y="29.04" >|</text>
+  <text x="11.88" y="39.600002" >n</text>
+  <g>
+    <line x1="10.56" y1="10.56" x2="15.84" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="21.12" y2="21.12" class="solid"></line>
+  </g>
+  <g>
+    <line x1="2.64" y1="31.68" x2="2.64" y2="42.24" class="solid"></line>
+    <line x1="2.64" y1="42.24" x2="10.56" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="42.24" x2="23.76" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="31.68" x2="23.76" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/outline/eftitalic.flf b/static/db/contributed/outline/eftitalic.flf
similarity index 100%
rename from db/contributed/outline/eftitalic.flf
rename to static/db/contributed/outline/eftitalic.flf
diff --git a/static/db/contributed/outline/eftitalic.svg b/static/db/contributed/outline/eftitalic.svg
new file mode 100644
index 0000000..ca2c500
--- /dev/null
+++ b/static/db/contributed/outline/eftitalic.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="52.800003" 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="36.960003" height="52.800003"></rect>
+  <text x="17.16" y="18.480001" >&#39;</text>
+  <text x="17.16" y="29.04" >o</text>
+  <text x="11.88" y="39.600002" >n</text>
+  <g>
+    <line x1="21.12" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <path d="M 21.12,10.56 A 21.12,21.12 0,0,0 10.56,21.12" class="nofill"></path>
+    <line x1="26.400002" y1="10.56" x2="31.68" y2="21.12" class="solid"></line>
+    <line x1="10.56" y1="21.12" x2="0" y2="42.24" class="solid"></line>
+    <line x1="31.68" y1="21.12" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="0" y1="42.24" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="21.12" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/outline/eftiwater.flf b/static/db/contributed/outline/eftiwater.flf
similarity index 100%
rename from db/contributed/outline/eftiwater.flf
rename to static/db/contributed/outline/eftiwater.flf
diff --git a/static/db/contributed/outline/eftiwater.svg b/static/db/contributed/outline/eftiwater.svg
new file mode 100644
index 0000000..d2ec12e
--- /dev/null
+++ b/static/db/contributed/outline/eftiwater.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="42.24" 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="31.68" height="42.24"></rect>
+  <text x="17.16" y="18.480001" >`</text>
+  <path d="M 10.56,21.12 A 10.56,10.56 0,0,0 10.56,31.68" class="nofill"></path>
+  <g>
+    <line x1="10.56" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+    <line x1="5.28" y1="21.12" x2="15.84" y2="21.12" class="solid"></line>
+    <path d="M 21.12,10.56 A 10.56,10.56 0,0,1 21.12,21.12" class="nofill"></path>
+    <path d="M 5.28,21.12 A 10.56,10.56 0,0,0 5.28,31.68" class="nofill"></path>
+    <path d="M 21.12,21.12 A 10.56,10.56 0,0,0 21.12,31.68" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/contributed/outline/fender.flf b/static/db/contributed/outline/fender.flf
similarity index 100%
rename from db/contributed/outline/fender.flf
rename to static/db/contributed/outline/fender.flf
diff --git a/static/db/contributed/outline/fender.svg b/static/db/contributed/outline/fender.svg
new file mode 100644
index 0000000..6e457fa
--- /dev/null
+++ b/static/db/contributed/outline/fender.svg
@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="73.920006" height="63.36" 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="73.920006" height="63.36"></rect>
+  <line x1="31.68" y1="0" x2="5.28" y2="52.800003" class="solid"></line>
+  <text x="27.720001" y="29.04" >...</text>
+  <line x1="36.960003" y1="0" x2="63.36" y2="52.800003" class="solid"></line>
+  <text x="1.32" y="50.160004" >.</text>
+  <text x="64.68" y="50.160004" >.</text>
+  <g>
+    <line x1="34.32" y1="5.28" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="34.32" y1="5.28" x2="58.08" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/outline/fuzzy.flf b/static/db/contributed/outline/fuzzy.flf
similarity index 100%
rename from db/contributed/outline/fuzzy.flf
rename to static/db/contributed/outline/fuzzy.flf
diff --git a/static/db/contributed/outline/fuzzy.svg b/static/db/contributed/outline/fuzzy.svg
new file mode 100644
index 0000000..d6767b0
--- /dev/null
+++ b/static/db/contributed/outline/fuzzy.svg
@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="63.36" 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="36.960003" height="63.36"></rect>
+  <text x="11.88" y="18.480001" >.;</text>
+  <text x="11.88" y="39.600002" >:</text>
+  <line x1="18.480001" y1="31.68" x2="18.480001" y2="52.800003" class="broken"></line>
+  <line x1="5.28" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+  <text x="11.88" y="50.160004" >;</text>
+  <line x1="21.12" y1="52.800003" x2="26.400002" y2="52.800003" class="solid"></line>
+  <text x="27.720001" y="50.160004" >;</text>
+  <g>
+    <path d="M 7.92,5.28 A 5.28,5.28 0,0,0 2.64,10.56" class="nofill"></path>
+    <line x1="7.92" y1="5.28" x2="23.76" y2="5.28" class="solid"></line>
+    <path d="M 23.76,5.28 A 5.28,5.28 0,0,1 29.04,10.56" class="nofill"></path>
+    <line x1="2.64" y1="10.56" x2="2.64" y2="52.800003" class="broken"></line>
+    <line x1="29.04" y1="10.56" x2="29.04" y2="42.24" class="broken"></line>
+  </g>
+</svg>
diff --git a/db/contributed/outline/gothic.flf b/static/db/contributed/outline/gothic.flf
similarity index 100%
rename from db/contributed/outline/gothic.flf
rename to static/db/contributed/outline/gothic.flf
diff --git a/static/db/contributed/outline/gothic.svg b/static/db/contributed/outline/gothic.svg
new file mode 100644
index 0000000..c350c54
--- /dev/null
+++ b/static/db/contributed/outline/gothic.svg
@@ -0,0 +1,126 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="84.48" 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="47.52" height="84.48"></rect>
+  <line x1="10.56" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+  <line x1="5.28" y1="15.84" x2="10.56" y2="15.84" class="solid"></line>
+  <line x1="26.400002" y1="15.84" x2="31.68" y2="15.84" class="solid"></line>
+  <text x="38.280003" y="18.480001" >,</text>
+  <line x1="15.84" y1="46.2" x2="26.400002" y2="46.2" class="solid"></line>
+  <line x1="15.84" y1="48.84" x2="26.400002" y2="48.84" class="solid"></line>
+  <line x1="15.84" y1="68.64" x2="21.12" y2="68.64" class="solid"></line>
+  <text x="38.280003" y="71.28001" >,</text>
+  <g>
+    <line x1="29.04" y1="21.12" x2="36.960003" y2="21.12" class="solid"></line>
+    <line x1="29.04" y1="21.12" x2="29.04" y2="58.08" class="solid"></line>
+    <line x1="34.32" y1="21.12" x2="34.32" y2="63.36" class="solid"></line>
+    <line x1="29.04" y1="58.08" x2="36.960003" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 5.28,21.12 A 10.56,10.56 0,0,0 5.28,31.68" class="nofill"></path>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,0 5.28,42.24" class="nofill"></path>
+    <line x1="15.84" y1="26.400002" x2="23.76" y2="26.400002" class="broken"></line>
+    <line x1="26.400002" y1="21.12" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="5.28" y1="42.24" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="5.28" y1="63.36" x2="15.84" y2="63.36" class="solid"></line>
+    <path d="M 5.28,63.36 A 10.56,10.56 0,0,0 5.28,73.920006" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="21.12" y1="63.36" x2="29.04" y2="63.36" class="solid"></line>
+    <line x1="26.400002" y1="63.36" x2="31.68" y2="73.920006" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/outline/kban.flf b/static/db/contributed/outline/kban.flf
similarity index 100%
rename from db/contributed/outline/kban.flf
rename to static/db/contributed/outline/kban.flf
diff --git a/static/db/contributed/outline/kban.svg b/static/db/contributed/outline/kban.svg
new file mode 100644
index 0000000..7f460cf
--- /dev/null
+++ b/static/db/contributed/outline/kban.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="63.36" 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="52.800003" height="63.36"></rect>
+  <line x1="23.76" y1="0" x2="23.76" y2="21.12" class="solid"></line>
+  <line x1="18.480001" y1="10.56" x2="18.480001" y2="21.12" class="solid"></line>
+  <line x1="29.04" y1="10.56" x2="29.04" y2="34.32" class="solid"></line>
+  <line x1="13.200001" y1="21.12" x2="13.200001" y2="34.32" class="solid"></line>
+  <line x1="34.32" y1="21.12" x2="34.32" y2="52.800003" class="solid"></line>
+  <line x1="7.92" y1="39.600002" x2="7.92" y2="52.800003" class="solid"></line>
+  <text x="17.16" y="39.600002" >&#39;&#39;</text>
+  <line x1="39.600002" y1="39.600002" x2="39.600002" y2="52.800003" class="solid"></line>
+  <text x="1.32" y="50.160004" >.</text>
+  <text x="11.88" y="50.160004" >.</text>
+  <text x="27.720001" y="50.160004" >.</text>
+  <text x="43.56" y="50.160004" >.</text>
+</svg>
diff --git a/db/contributed/outline/madrid.flf b/static/db/contributed/outline/madrid.flf
similarity index 100%
rename from db/contributed/outline/madrid.flf
rename to static/db/contributed/outline/madrid.flf
diff --git a/static/db/contributed/outline/madrid.svg b/static/db/contributed/outline/madrid.svg
new file mode 100644
index 0000000..8cc35a6
--- /dev/null
+++ b/static/db/contributed/outline/madrid.svg
@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="42.24" 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="21.12" height="42.24"></rect>
+  <line x1="5.28" y1="3.96" x2="10.56" y2="3.96" class="solid"></line>
+  <line x1="5.28" y1="6.6000004" x2="10.56" y2="6.6000004" class="solid"></line>
+  <line x1="5.28" y1="14.52" x2="10.56" y2="14.52" class="solid"></line>
+  <line x1="5.28" y1="17.16" x2="10.56" y2="17.16" class="solid"></line>
+  <line x1="0" y1="21.12" x2="5.28" y2="31.68" class="solid"></line>
+  <line x1="15.84" y1="21.12" x2="10.56" y2="31.68" class="solid"></line>
+  <g>
+    <line x1="5.28" y1="0" x2="2.64" y2="5.28" class="solid"></line>
+    <line x1="2.64" y1="5.28" x2="2.64" y2="21.12" class="solid"></line>
+  </g>
+  <g>
+    <line x1="10.56" y1="0" x2="13.200001" y2="5.28" class="solid"></line>
+    <line x1="13.200001" y1="5.28" x2="13.200001" y2="21.12" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/pattern/barbwire.flf b/static/db/contributed/pattern/barbwire.flf
similarity index 100%
rename from db/contributed/pattern/barbwire.flf
rename to static/db/contributed/pattern/barbwire.flf
diff --git a/static/db/contributed/pattern/barbwire.svg b/static/db/contributed/pattern/barbwire.svg
new file mode 100644
index 0000000..679de8d
--- /dev/null
+++ b/static/db/contributed/pattern/barbwire.svg
@@ -0,0 +1,135 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <text x="33" y="7.92" >&gt;&lt;</text>
+  <text x="27.720001" y="18.480001" >&gt;&lt;</text>
+  <polygon points="47.52,13.200001 42.24,15.84 47.52,18.480001" class="filled"></polygon>
+  <text x="48.84" y="18.480001" >&lt;</text>
+  <text x="22.44" y="29.04" >&gt;&lt;</text>
+  <text x="43.56" y="29.04" >&gt;</text>
+  <polygon points="52.800003,23.76 47.52,26.400002 52.800003,29.04" class="filled"></polygon>
+  <text x="54.120003" y="29.04" >&lt;</text>
+  <text x="17.16" y="39.600002" >&gt;</text>
+  <polygon points="26.400002,34.32 21.12,36.960003 26.400002,39.600002" class="filled"></polygon>
+  <text x="27.720001" y="39.600002" >&lt;</text>
+  <text x="48.84" y="39.600002" >&gt;</text>
+  <polygon points="58.08,34.32 52.800003,36.960003 58.08,39.600002" class="filled"></polygon>
+  <text x="59.4" y="39.600002" >&lt;</text>
+  <text x="11.88" y="50.160004" >&gt;</text>
+  <polygon points="21.12,44.88 15.84,47.52 21.12,50.160004" class="filled"></polygon>
+  <polygon points="26.400002,44.88 21.12,47.52 26.400002,50.160004" class="filled"></polygon>
+  <polygon points="31.68,44.88 26.400002,47.52 31.68,50.160004" class="filled"></polygon>
+  <polygon points="36.960003,44.88 31.68,47.52 36.960003,50.160004" class="filled"></polygon>
+  <polygon points="42.24,44.88 36.960003,47.52 42.24,50.160004" class="filled"></polygon>
+  <text x="43.56" y="50.160004" >&lt;</text>
+  <text x="54.120003" y="50.160004" >&gt;</text>
+  <polygon points="63.36,44.88 58.08,47.52 63.36,50.160004" class="filled"></polygon>
+  <text x="64.68" y="50.160004" >&lt;</text>
+  <text x="6.6000004" y="60.72" >&gt;</text>
+  <polygon points="15.84,55.440002 10.56,58.08 15.84,60.72" class="filled"></polygon>
+  <text x="17.16" y="60.72" >&lt;</text>
+  <text x="59.4" y="60.72" >&gt;</text>
+  <polygon points="68.64,55.440002 63.36,58.08 68.64,60.72" class="filled"></polygon>
+  <text x="69.96" y="60.72" >&lt;</text>
+  <text x="1.32" y="71.28001" >&gt;</text>
+  <polygon points="10.56,66 5.28,68.64 10.56,71.28001" class="filled"></polygon>
+  <text x="11.88" y="71.28001" >&lt;</text>
+  <text x="64.68" y="71.28001" >&gt;</text>
+  <polygon points="73.920006,66 68.64,68.64 73.920006,71.28001" class="filled"></polygon>
+  <text x="75.240005" y="71.28001" >&lt;</text>
+</svg>
diff --git a/db/contributed/pattern/caligraphy.flf b/static/db/contributed/pattern/caligraphy.flf
similarity index 100%
rename from db/contributed/pattern/caligraphy.flf
rename to static/db/contributed/pattern/caligraphy.flf
diff --git a/static/db/contributed/pattern/caligraphy.svg b/static/db/contributed/pattern/caligraphy.svg
new file mode 100644
index 0000000..573e1bd
--- /dev/null
+++ b/static/db/contributed/pattern/caligraphy.svg
@@ -0,0 +1,130 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="95.04" height="200.64001" 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="95.04" height="200.64001"></rect>
+  <line x1="44.88" y1="15.84" x2="50.160004" y2="15.84" class="solid"></line>
+  <line x1="29.04" y1="26.400002" x2="50.160004" y2="26.400002" class="solid"></line>
+  <text x="22.44" y="39.600002" >*</text>
+  <line x1="39.600002" y1="36.960003" x2="50.160004" y2="36.960003" class="solid"></line>
+  <line x1="39.600002" y1="47.52" x2="50.160004" y2="47.52" class="solid"></line>
+  <text x="33" y="60.72" >*</text>
+  <line x1="50.160004" y1="58.08" x2="55.440002" y2="58.08" class="solid"></line>
+  <text x="33" y="71.28001" >*</text>
+  <line x1="50.160004" y1="68.64" x2="55.440002" y2="68.64" class="solid"></line>
+  <text x="27.720001" y="81.840004" >*</text>
+  <line x1="55.440002" y1="79.200005" x2="60.72" y2="79.200005" class="solid"></line>
+  <text x="27.720001" y="92.4" >*</text>
+  <line x1="55.440002" y1="89.76" x2="60.72" y2="89.76" class="solid"></line>
+  <text x="22.44" y="102.96001" >*</text>
+  <line x1="60.72" y1="100.32001" x2="66" y2="100.32001" class="solid"></line>
+  <line x1="23.76" y1="110.880005" x2="66" y2="110.880005" class="solid"></line>
+  <text x="17.16" y="124.08" >*</text>
+  <line x1="66" y1="121.44" x2="71.28001" y2="121.44" class="solid"></line>
+  <text x="17.16" y="134.64" >*</text>
+  <line x1="66" y1="132" x2="71.28001" y2="132" class="solid"></line>
+  <line x1="13.200001" y1="142.56001" x2="34.32" y2="142.56001" class="solid"></line>
+  <line x1="71.28001" y1="142.56001" x2="76.560005" y2="142.56001" class="solid"></line>
+  <text x="6.6000004" y="155.76001" >*</text>
+  <line x1="29.04" y1="153.12001" x2="44.88" y2="153.12001" class="solid"></line>
+  <line x1="71.28001" y1="153.12001" x2="76.560005" y2="153.12001" class="solid"></line>
+  <text x="85.8" y="155.76001" >*</text>
+  <text x="1.32" y="166.32" >*</text>
+  <line x1="34.32" y1="163.68001" x2="39.600002" y2="163.68001" class="solid"></line>
+  <line x1="76.560005" y1="163.68001" x2="81.840004" y2="163.68001" class="solid"></line>
+  <text x="1.32" y="176.88" >*</text>
+  <line x1="7.92" y1="184.8" x2="13.200001" y2="184.8" class="solid"></line>
+</svg>
diff --git a/db/contributed/pattern/catwalk.flf b/static/db/contributed/pattern/catwalk.flf
similarity index 100%
rename from db/contributed/pattern/catwalk.flf
rename to static/db/contributed/pattern/catwalk.flf
diff --git a/static/db/contributed/pattern/catwalk.svg b/static/db/contributed/pattern/catwalk.svg
new file mode 100644
index 0000000..5fe919c
--- /dev/null
+++ b/static/db/contributed/pattern/catwalk.svg
@@ -0,0 +1,141 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <line x1="47.52" y1="10.56" x2="42.24" y2="21.12" class="solid"></line>
+  <line x1="52.800003" y1="10.56" x2="47.52" y2="21.12" class="solid"></line>
+  <line x1="58.08" y1="21.12" x2="52.800003" y2="31.68" class="solid"></line>
+  <line x1="31.68" y1="31.68" x2="10.56" y2="73.920006" class="solid"></line>
+  <line x1="31.68" y1="42.24" x2="26.400002" y2="52.800003" class="solid"></line>
+  <line x1="63.36" y1="31.68" x2="58.08" y2="42.24" class="solid"></line>
+  <line x1="36.960003" y1="42.24" x2="31.68" y2="52.800003" class="solid"></line>
+  <line x1="42.24" y1="42.24" x2="36.960003" y2="52.800003" class="solid"></line>
+  <line x1="68.64" y1="42.24" x2="63.36" y2="52.800003" class="solid"></line>
+  <line x1="73.920006" y1="52.800003" x2="68.64" y2="63.36" class="solid"></line>
+  <line x1="79.200005" y1="63.36" x2="73.920006" y2="73.920006" class="solid"></line>
+  <g>
+    <line x1="31.68" y1="10.56" x2="36.960003" y2="10.56" class="solid"></line>
+    <line x1="42.24" y1="0" x2="5.28" y2="73.920006" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="31.68" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="52.800003" x2="15.84" y2="52.800003" class="solid"></line>
+    <line x1="5.28" y1="63.36" x2="10.56" y2="63.36" class="solid"></line>
+    <line x1="0" y1="73.920006" x2="5.28" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="42.24" y1="31.68" x2="47.52" y2="31.68" class="solid"></line>
+    <line x1="52.800003" y1="21.12" x2="47.52" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="47.52" y1="42.24" x2="52.800003" y2="42.24" class="solid"></line>
+    <line x1="58.08" y1="31.68" x2="52.800003" y2="42.24" class="solid"></line>
+    <line x1="47.52" y1="42.24" x2="42.24" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="52.800003" y1="52.800003" x2="58.08" y2="52.800003" class="solid"></line>
+    <line x1="63.36" y1="42.24" x2="58.08" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="58.08" y1="63.36" x2="63.36" y2="63.36" class="solid"></line>
+    <line x1="68.64" y1="52.800003" x2="63.36" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <line x1="63.36" y1="73.920006" x2="68.64" y2="73.920006" class="solid"></line>
+    <line x1="73.920006" y1="63.36" x2="68.64" y2="73.920006" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/pattern/coinstak.flf b/static/db/contributed/pattern/coinstak.flf
similarity index 100%
rename from db/contributed/pattern/coinstak.flf
rename to static/db/contributed/pattern/coinstak.flf
diff --git a/static/db/contributed/pattern/coinstak.svg b/static/db/contributed/pattern/coinstak.svg
new file mode 100644
index 0000000..0b0af05
--- /dev/null
+++ b/static/db/contributed/pattern/coinstak.svg
@@ -0,0 +1,156 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <text x="33" y="7.92" >O</text>
+  <path d="M 36.960003,0 A 10.56,10.56 0,0,1 36.960003,10.56" class="nofill"></path>
+  <text x="27.720001" y="18.480001" >O</text>
+  <path d="M 31.68,10.56 A 10.56,10.56 0,0,1 31.68,21.12" class="nofill"></path>
+  <path d="M 42.24,10.56 A 10.56,10.56 0,0,1 42.24,21.12" class="nofill"></path>
+  <text x="22.44" y="29.04" >O</text>
+  <text x="43.56" y="29.04" >O</text>
+  <text x="17.16" y="39.600002" >O</text>
+  <text x="48.84" y="39.600002" >O</text>
+  <text x="11.88" y="50.160004" >O</text>
+  <path d="M 31.68,42.24 A 10.56,10.56 0,0,1 31.68,52.800003" class="nofill"></path>
+  <path d="M 36.960003,42.24 A 10.56,10.56 0,0,1 36.960003,52.800003" class="nofill"></path>
+  <path d="M 42.24,42.24 A 10.56,10.56 0,0,1 42.24,52.800003" class="nofill"></path>
+  <text x="54.120003" y="50.160004" >O</text>
+  <text x="6.6000004" y="60.72" >O</text>
+  <text x="59.4" y="60.72" >O</text>
+  <text x="1.32" y="71.28001" >O</text>
+  <path d="M 5.28,63.36 A 10.56,10.56 0,0,1 5.28,73.920006" class="nofill"></path>
+  <text x="64.68" y="71.28001" >O</text>
+  <path d="M 73.920006,63.36 A 10.56,10.56 0,0,1 73.920006,73.920006" class="nofill"></path>
+  <g>
+    <path d="M 47.52,10.56 A 10.56,10.56 0,0,1 47.52,21.12" class="nofill"></path>
+    <path d="M 47.52,21.12 A 10.56,10.56 0,0,1 47.52,31.68" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 26.400002,21.12 A 10.56,10.56 0,0,1 26.400002,31.68" class="nofill"></path>
+    <path d="M 26.400002,31.68 A 10.56,10.56 0,0,1 26.400002,42.24" class="nofill"></path>
+    <path d="M 26.400002,42.24 A 10.56,10.56 0,0,1 26.400002,52.800003" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 52.800003,21.12 A 10.56,10.56 0,0,1 52.800003,31.68" class="nofill"></path>
+    <path d="M 52.800003,31.68 A 10.56,10.56 0,0,1 52.800003,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 21.12,31.68 A 10.56,10.56 0,0,1 21.12,42.24" class="nofill"></path>
+    <path d="M 21.12,42.24 A 10.56,10.56 0,0,1 21.12,52.800003" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 58.08,31.68 A 10.56,10.56 0,0,1 58.08,42.24" class="nofill"></path>
+    <path d="M 58.08,42.24 A 10.56,10.56 0,0,1 58.08,52.800003" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 15.84,42.24 A 10.56,10.56 0,0,1 15.84,52.800003" class="nofill"></path>
+    <path d="M 15.84,52.800003 A 10.56,10.56 0,0,1 15.84,63.36" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 63.36,42.24 A 10.56,10.56 0,0,1 63.36,52.800003" class="nofill"></path>
+    <path d="M 63.36,52.800003 A 10.56,10.56 0,0,1 63.36,63.36" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 10.56,52.800003 A 10.56,10.56 0,0,1 10.56,63.36" class="nofill"></path>
+    <path d="M 10.56,63.36 A 10.56,10.56 0,0,1 10.56,73.920006" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 68.64,52.800003 A 10.56,10.56 0,0,1 68.64,63.36" class="nofill"></path>
+    <path d="M 68.64,63.36 A 10.56,10.56 0,0,1 68.64,73.920006" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/contributed/pattern/diamond.flf b/static/db/contributed/pattern/diamond.flf
similarity index 100%
rename from db/contributed/pattern/diamond.flf
rename to static/db/contributed/pattern/diamond.flf
diff --git a/static/db/contributed/pattern/diamond.svg b/static/db/contributed/pattern/diamond.svg
new file mode 100644
index 0000000..84ba9f7
--- /dev/null
+++ b/static/db/contributed/pattern/diamond.svg
@@ -0,0 +1,121 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <line x1="47.52" y1="10.56" x2="79.200005" y2="73.920006" class="solid"></line>
+  <line x1="26.400002" y1="31.68" x2="36.960003" y2="52.800003" class="solid"></line>
+  <line x1="21.12" y1="42.24" x2="26.400002" y2="52.800003" class="solid"></line>
+  <line x1="36.960003" y1="42.24" x2="42.24" y2="52.800003" class="solid"></line>
+  <line x1="42.24" y1="42.24" x2="47.52" y2="52.800003" class="solid"></line>
+  <line x1="15.84" y1="52.800003" x2="21.12" y2="63.36" class="solid"></line>
+  <line x1="10.56" y1="63.36" x2="15.84" y2="73.920006" class="solid"></line>
+  <g>
+    <line x1="36.960003" y1="0" x2="0" y2="73.920006" class="solid"></line>
+    <line x1="36.960003" y1="0" x2="73.920006" y2="73.920006" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="36.960003" y2="21.12" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="47.52" y1="21.12" x2="42.24" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="52.800003" y1="31.68" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="58.08" y1="42.24" x2="52.800003" y2="52.800003" class="solid"></line>
+    <line x1="10.56" y1="52.800003" x2="15.84" y2="63.36" class="solid"></line>
+    <line x1="63.36" y1="52.800003" x2="58.08" y2="63.36" class="solid"></line>
+    <line x1="5.28" y1="63.36" x2="10.56" y2="73.920006" class="solid"></line>
+    <line x1="68.64" y1="63.36" x2="63.36" y2="73.920006" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/pattern/dotmatrix.flf b/static/db/contributed/pattern/dotmatrix.flf
similarity index 100%
rename from db/contributed/pattern/dotmatrix.flf
rename to static/db/contributed/pattern/dotmatrix.flf
diff --git a/static/db/contributed/pattern/dotmatrix.svg b/static/db/contributed/pattern/dotmatrix.svg
new file mode 100644
index 0000000..7436eaf
--- /dev/null
+++ b/static/db/contributed/pattern/dotmatrix.svg
@@ -0,0 +1,177 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="95.04" 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="84.48" height="95.04"></rect>
+  <g>
+    <line x1="36.960003" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+    <path d="M 36.960003,10.56 A 10.56,10.56 0,0,0 36.960003,21.12" class="nofill"></path>
+    <line x1="36.960003" y1="21.12" x2="42.24" y2="21.12" class="solid"></line>
+    <path d="M 42.24,10.56 A 10.56,10.56 0,0,1 42.24,21.12" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="26.400002" y1="21.12" x2="31.68" y2="21.12" class="solid"></line>
+    <path d="M 26.400002,21.12 A 10.56,10.56 0,0,0 26.400002,31.68" class="nofill"></path>
+    <line x1="26.400002" y1="31.68" x2="31.68" y2="31.68" class="solid"></line>
+    <path d="M 31.68,21.12 A 10.56,10.56 0,0,1 31.68,31.68" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="47.52" y1="21.12" x2="52.800003" y2="21.12" class="solid"></line>
+    <path d="M 47.52,21.12 A 10.56,10.56 0,0,0 47.52,31.68" class="nofill"></path>
+    <line x1="47.52" y1="31.68" x2="52.800003" y2="31.68" class="solid"></line>
+    <path d="M 52.800003,21.12 A 10.56,10.56 0,0,1 52.800003,31.68" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="15.84" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+    <path d="M 15.84,31.68 A 10.56,10.56 0,0,0 15.84,42.24" class="nofill"></path>
+    <line x1="15.84" y1="42.24" x2="21.12" y2="42.24" class="solid"></line>
+    <path d="M 21.12,31.68 A 10.56,10.56 0,0,1 21.12,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="58.08" y1="31.68" x2="63.36" y2="31.68" class="solid"></line>
+    <path d="M 58.08,31.68 A 10.56,10.56 0,0,0 58.08,42.24" class="nofill"></path>
+    <line x1="58.08" y1="42.24" x2="63.36" y2="42.24" class="solid"></line>
+    <path d="M 63.36,31.68 A 10.56,10.56 0,0,1 63.36,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="5.28" y1="42.24" x2="10.56" y2="42.24" class="solid"></line>
+    <path d="M 5.28,42.24 A 10.56,10.56 0,0,0 5.28,52.800003" class="nofill"></path>
+    <line x1="5.28" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <path d="M 10.56,42.24 A 10.56,10.56 0,0,1 10.56,52.800003" class="nofill"></path>
+    <path d="M 5.28,52.800003 A 10.56,10.56 0,0,0 5.28,63.36" class="nofill"></path>
+    <line x1="5.28" y1="63.36" x2="10.56" y2="63.36" class="solid"></line>
+    <path d="M 10.56,52.800003 A 10.56,10.56 0,0,1 10.56,63.36" class="nofill"></path>
+    <path d="M 5.28,63.36 A 10.56,10.56 0,0,0 5.28,73.920006" class="nofill"></path>
+    <line x1="5.28" y1="73.920006" x2="10.56" y2="73.920006" class="solid"></line>
+    <path d="M 10.56,63.36 A 10.56,10.56 0,0,1 10.56,73.920006" class="nofill"></path>
+    <path d="M 5.28,73.920006 A 10.56,10.56 0,0,0 5.28,84.48" class="nofill"></path>
+    <line x1="5.28" y1="84.48" x2="10.56" y2="84.48" class="solid"></line>
+    <path d="M 10.56,73.920006 A 10.56,10.56 0,0,1 10.56,84.48" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="68.64" y1="42.24" x2="73.920006" y2="42.24" class="solid"></line>
+    <path d="M 68.64,42.24 A 10.56,10.56 0,0,0 68.64,52.800003" class="nofill"></path>
+    <line x1="68.64" y1="52.800003" x2="73.920006" y2="52.800003" class="solid"></line>
+    <path d="M 73.920006,42.24 A 10.56,10.56 0,0,1 73.920006,52.800003" class="nofill"></path>
+    <path d="M 68.64,52.800003 A 10.56,10.56 0,0,0 68.64,63.36" class="nofill"></path>
+    <line x1="68.64" y1="63.36" x2="73.920006" y2="63.36" class="solid"></line>
+    <path d="M 73.920006,52.800003 A 10.56,10.56 0,0,1 73.920006,63.36" class="nofill"></path>
+    <path d="M 68.64,63.36 A 10.56,10.56 0,0,0 68.64,73.920006" class="nofill"></path>
+    <line x1="68.64" y1="73.920006" x2="73.920006" y2="73.920006" class="solid"></line>
+    <path d="M 73.920006,63.36 A 10.56,10.56 0,0,1 73.920006,73.920006" class="nofill"></path>
+    <path d="M 68.64,73.920006 A 10.56,10.56 0,0,0 68.64,84.48" class="nofill"></path>
+    <line x1="68.64" y1="84.48" x2="73.920006" y2="84.48" class="solid"></line>
+    <path d="M 73.920006,73.920006 A 10.56,10.56 0,0,1 73.920006,84.48" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="21.12" y1="52.800003" x2="26.400002" y2="52.800003" class="solid"></line>
+    <path d="M 21.12,52.800003 A 10.56,10.56 0,0,0 21.12,63.36" class="nofill"></path>
+    <line x1="21.12" y1="63.36" x2="26.400002" y2="63.36" class="solid"></line>
+    <path d="M 26.400002,52.800003 A 10.56,10.56 0,0,1 26.400002,63.36" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="36.960003" y1="52.800003" x2="42.24" y2="52.800003" class="solid"></line>
+    <path d="M 36.960003,52.800003 A 10.56,10.56 0,0,0 36.960003,63.36" class="nofill"></path>
+    <line x1="36.960003" y1="63.36" x2="42.24" y2="63.36" class="solid"></line>
+    <path d="M 42.24,52.800003 A 10.56,10.56 0,0,1 42.24,63.36" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="52.800003" y1="52.800003" x2="58.08" y2="52.800003" class="solid"></line>
+    <path d="M 52.800003,52.800003 A 10.56,10.56 0,0,0 52.800003,63.36" class="nofill"></path>
+    <line x1="52.800003" y1="63.36" x2="58.08" y2="63.36" class="solid"></line>
+    <path d="M 58.08,52.800003 A 10.56,10.56 0,0,1 58.08,63.36" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/contributed/pattern/marquee.flf b/static/db/contributed/pattern/marquee.flf
similarity index 100%
rename from db/contributed/pattern/marquee.flf
rename to static/db/contributed/pattern/marquee.flf
diff --git a/static/db/contributed/pattern/marquee.svg b/static/db/contributed/pattern/marquee.svg
new file mode 100644
index 0000000..f8a92c1
--- /dev/null
+++ b/static/db/contributed/pattern/marquee.svg
@@ -0,0 +1,121 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <line x1="34.32" y1="7.92" x2="34.32" y2="10.56" class="solid"></line>
+  <text x="38.280003" y="7.92" >:</text>
+  <line x1="29.04" y1="18.480001" x2="29.04" y2="52.800003" class="broken"></line>
+  <text x="33" y="18.480001" >:</text>
+  <text x="43.56" y="18.480001" >:</text>
+  <line x1="50.160004" y1="10.56" x2="50.160004" y2="31.68" class="broken"></line>
+  <line x1="23.76" y1="29.04" x2="23.76" y2="52.800003" class="broken"></line>
+  <text x="43.56" y="29.04" >.</text>
+  <line x1="55.440002" y1="21.12" x2="55.440002" y2="42.24" class="broken"></line>
+  <line x1="18.480001" y1="39.600002" x2="18.480001" y2="63.36" class="broken"></line>
+  <text x="48.84" y="39.600002" >.</text>
+  <line x1="60.72" y1="31.68" x2="60.72" y2="52.800003" class="broken"></line>
+  <line x1="13.200001" y1="50.160004" x2="13.200001" y2="73.920006" class="broken"></line>
+  <text x="33" y="50.160004" >:::</text>
+  <text x="54.120003" y="50.160004" >.</text>
+  <line x1="66" y1="42.24" x2="66" y2="63.36" class="broken"></line>
+  <line x1="7.92" y1="60.72" x2="7.92" y2="63.36" class="solid"></line>
+  <text x="59.4" y="60.72" >.</text>
+  <line x1="71.28001" y1="52.800003" x2="71.28001" y2="73.920006" class="broken"></line>
+  <text x="1.32" y="71.28001" >.:</text>
+  <text x="64.68" y="71.28001" >.</text>
+  <text x="75.240005" y="71.28001" >:</text>
+</svg>
diff --git a/db/contributed/pattern/nipples.flf b/static/db/contributed/pattern/nipples.flf
similarity index 100%
rename from db/contributed/pattern/nipples.flf
rename to static/db/contributed/pattern/nipples.flf
diff --git a/static/db/contributed/pattern/nipples.svg b/static/db/contributed/pattern/nipples.svg
new file mode 100644
index 0000000..d8d0753
--- /dev/null
+++ b/static/db/contributed/pattern/nipples.svg
@@ -0,0 +1,124 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <text x="33" y="7.92" >{</text>
+  <line x1="36.960003" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+  <text x="27.720001" y="18.480001" >{</text>
+  <line x1="31.68" y1="21.12" x2="36.960003" y2="21.12" class="solid"></line>
+  <line x1="42.24" y1="21.12" x2="52.800003" y2="21.12" class="solid"></line>
+  <text x="22.44" y="29.04" >{</text>
+  <line x1="26.400002" y1="31.68" x2="31.68" y2="31.68" class="solid"></line>
+  <text x="43.56" y="29.04" >{</text>
+  <line x1="47.52" y1="31.68" x2="58.08" y2="31.68" class="solid"></line>
+  <text x="17.16" y="39.600002" >{</text>
+  <line x1="21.12" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+  <text x="48.84" y="39.600002" >{</text>
+  <line x1="52.800003" y1="42.24" x2="63.36" y2="42.24" class="solid"></line>
+  <text x="11.88" y="50.160004" >{</text>
+  <line x1="15.84" y1="52.800003" x2="47.52" y2="52.800003" class="solid"></line>
+  <text x="54.120003" y="50.160004" >{</text>
+  <line x1="58.08" y1="52.800003" x2="68.64" y2="52.800003" class="solid"></line>
+  <text x="6.6000004" y="60.72" >{</text>
+  <line x1="10.56" y1="63.36" x2="21.12" y2="63.36" class="solid"></line>
+  <text x="59.4" y="60.72" >{</text>
+  <line x1="63.36" y1="63.36" x2="73.920006" y2="63.36" class="solid"></line>
+  <text x="1.32" y="71.28001" >{</text>
+  <line x1="5.28" y1="73.920006" x2="15.84" y2="73.920006" class="solid"></line>
+  <text x="64.68" y="71.28001" >{</text>
+  <line x1="68.64" y1="73.920006" x2="79.200005" y2="73.920006" class="solid"></line>
+</svg>
diff --git a/db/contributed/pattern/os2.flf b/static/db/contributed/pattern/os2.flf
similarity index 100%
rename from db/contributed/pattern/os2.flf
rename to static/db/contributed/pattern/os2.flf
diff --git a/static/db/contributed/pattern/os2.svg b/static/db/contributed/pattern/os2.svg
new file mode 100644
index 0000000..053baf8
--- /dev/null
+++ b/static/db/contributed/pattern/os2.svg
@@ -0,0 +1,122 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="84.48" 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="58.08" height="84.48"></rect>
+  <line x1="0" y1="10.56" x2="15.84" y2="10.56" class="solid"></line>
+  <text x="17.16" y="7.92" >ooo</text>
+  <line x1="31.68" y1="10.56" x2="52.800003" y2="10.56" class="solid"></line>
+  <line x1="0" y1="21.12" x2="5.28" y2="21.12" class="solid"></line>
+  <text x="6.6000004" y="18.480001" >oo</text>
+  <line x1="15.84" y1="21.12" x2="31.68" y2="21.12" class="solid"></line>
+  <text x="33" y="18.480001" >oo</text>
+  <line x1="42.24" y1="21.12" x2="52.800003" y2="21.12" class="solid"></line>
+  <text x="1.32" y="29.04" >oo</text>
+  <line x1="10.56" y1="31.68" x2="36.960003" y2="31.68" class="solid"></line>
+  <text x="38.280003" y="29.04" >oo</text>
+  <line x1="47.52" y1="31.68" x2="52.800003" y2="31.68" class="solid"></line>
+  <text x="1.32" y="39.600002" >ooooooooo</text>
+  <line x1="47.52" y1="42.24" x2="52.800003" y2="42.24" class="solid"></line>
+  <text x="1.32" y="50.160004" >oo</text>
+  <line x1="10.56" y1="52.800003" x2="36.960003" y2="52.800003" class="solid"></line>
+  <text x="38.280003" y="50.160004" >oo</text>
+  <line x1="47.52" y1="52.800003" x2="52.800003" y2="52.800003" class="solid"></line>
+  <text x="1.32" y="60.72" >oo</text>
+  <line x1="10.56" y1="63.36" x2="36.960003" y2="63.36" class="solid"></line>
+  <text x="38.280003" y="60.72" >oo</text>
+  <line x1="47.52" y1="63.36" x2="52.800003" y2="63.36" class="solid"></line>
+  <line x1="0" y1="73.920006" x2="52.800003" y2="73.920006" class="solid"></line>
+</svg>
diff --git a/db/contributed/pattern/pawp.flf b/static/db/contributed/pattern/pawp.flf
similarity index 100%
rename from db/contributed/pattern/pawp.flf
rename to static/db/contributed/pattern/pawp.flf
diff --git a/static/db/contributed/pattern/pawp.svg b/static/db/contributed/pattern/pawp.svg
new file mode 100644
index 0000000..db06cf5
--- /dev/null
+++ b/static/db/contributed/pattern/pawp.svg
@@ -0,0 +1,127 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="84.48" 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="52.800003" height="84.48"></rect>
+  <line x1="15.84" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+  <g>
+    <line x1="10.56" y1="21.12" x2="36.960003" y2="21.12" class="solid"></line>
+    <path d="M 10.56,21.12 A 10.56,10.56 0,0,0 10.56,31.68" class="nofill"></path>
+    <line x1="10.56" y1="31.68" x2="36.960003" y2="31.68" class="solid"></line>
+    <path d="M 36.960003,21.12 A 10.56,10.56 0,0,1 36.960003,31.68" class="nofill"></path>
+    <path d="M 36.960003,31.68 A 10.56,10.56 0,0,0 36.960003,42.24" class="nofill"></path>
+    <line x1="36.960003" y1="42.24" x2="42.24" y2="42.24" class="solid"></line>
+    <path d="M 42.24,31.68 A 10.56,10.56 0,0,1 42.24,42.24" class="nofill"></path>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,0 5.28,42.24" class="nofill"></path>
+    <line x1="5.28" y1="42.24" x2="10.56" y2="42.24" class="solid"></line>
+    <path d="M 10.56,31.68 A 10.56,10.56 0,0,1 10.56,42.24" class="nofill"></path>
+    <path d="M 5.28,42.24 A 10.56,10.56 0,0,0 5.28,52.800003" class="nofill"></path>
+    <line x1="5.28" y1="52.800003" x2="42.24" y2="52.800003" class="solid"></line>
+    <path d="M 42.24,42.24 A 10.56,10.56 0,0,1 42.24,52.800003" class="nofill"></path>
+    <path d="M 5.28,52.800003 A 10.56,10.56 0,0,0 5.28,63.36" class="nofill"></path>
+    <line x1="5.28" y1="63.36" x2="10.56" y2="63.36" class="solid"></line>
+    <path d="M 10.56,52.800003 A 10.56,10.56 0,0,1 10.56,63.36" class="nofill"></path>
+    <path d="M 5.28,63.36 A 10.56,10.56 0,0,0 5.28,73.920006" class="nofill"></path>
+    <line x1="5.28" y1="73.920006" x2="10.56" y2="73.920006" class="solid"></line>
+    <path d="M 10.56,63.36 A 10.56,10.56 0,0,1 10.56,73.920006" class="nofill"></path>
+    <path d="M 36.960003,52.800003 A 10.56,10.56 0,0,0 36.960003,63.36" class="nofill"></path>
+    <line x1="36.960003" y1="63.36" x2="42.24" y2="63.36" class="solid"></line>
+    <path d="M 42.24,52.800003 A 10.56,10.56 0,0,1 42.24,63.36" class="nofill"></path>
+    <path d="M 36.960003,63.36 A 10.56,10.56 0,0,0 36.960003,73.920006" class="nofill"></path>
+    <line x1="36.960003" y1="73.920006" x2="42.24" y2="73.920006" class="solid"></line>
+    <path d="M 42.24,63.36 A 10.56,10.56 0,0,1 42.24,73.920006" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/contributed/pattern/peaks.flf b/static/db/contributed/pattern/peaks.flf
similarity index 100%
rename from db/contributed/pattern/peaks.flf
rename to static/db/contributed/pattern/peaks.flf
diff --git a/static/db/contributed/pattern/peaks.svg b/static/db/contributed/pattern/peaks.svg
new file mode 100644
index 0000000..d0a736d
--- /dev/null
+++ b/static/db/contributed/pattern/peaks.svg
@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <line x1="36.960003" y1="0" x2="0" y2="73.920006" class="solid"></line>
+  <text x="33" y="18.480001" >^</text>
+  <text x="27.720001" y="29.04" >^</text>
+  <text x="22.44" y="39.600002" >^^</text>
+  <text x="17.16" y="50.160004" >^^^^^^</text>
+  <text x="11.88" y="60.72" >^^</text>
+  <text x="6.6000004" y="71.28001" >^^</text>
+  <text x="38.280003" y="7.92" >^</text>
+  <text x="43.56" y="18.480001" >^</text>
+  <polygon points="46.86,18.480001 51.480003,13.200001 51.480003,20.460001" class="filled"></polygon>
+  <line x1="48.84" y1="18.480001" x2="42.24" y2="31.68" class="solid"></line>
+  <text x="48.84" y="29.04" >^</text>
+  <polygon points="52.140003,29.04 56.760002,23.76 56.760002,31.02" class="filled"></polygon>
+  <line x1="54.120003" y1="29.04" x2="47.52" y2="42.24" class="solid"></line>
+  <text x="54.120003" y="39.600002" >^</text>
+  <polygon points="57.420002,39.600002 62.04,34.32 62.04,41.58" class="filled"></polygon>
+  <line x1="59.4" y1="39.600002" x2="52.800003" y2="52.800003" class="solid"></line>
+  <text x="59.4" y="50.160004" >^</text>
+  <polygon points="62.7,50.160004 67.32,44.88 67.32,52.140003" class="filled"></polygon>
+  <line x1="64.68" y1="50.160004" x2="58.08" y2="63.36" class="solid"></line>
+  <text x="64.68" y="60.72" >^</text>
+  <polygon points="67.98,60.72 72.600006,55.440002 72.600006,62.7" class="filled"></polygon>
+  <line x1="69.96" y1="60.72" x2="63.36" y2="73.920006" class="solid"></line>
+  <text x="69.96" y="71.28001" >^^</text>
+</svg>
diff --git a/db/contributed/pattern/relief.flf b/static/db/contributed/pattern/relief.flf
similarity index 100%
rename from db/contributed/pattern/relief.flf
rename to static/db/contributed/pattern/relief.flf
diff --git a/static/db/contributed/pattern/relief.svg b/static/db/contributed/pattern/relief.svg
new file mode 100644
index 0000000..91a3d64
--- /dev/null
+++ b/static/db/contributed/pattern/relief.svg
@@ -0,0 +1,140 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="84.48" 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="63.36" height="84.48"></rect>
+  <line x1="0" y1="73.920006" x2="58.08" y2="73.920006" class="solid"></line>
+  <g>
+    <line x1="0" y1="10.56" x2="58.08" y2="10.56" class="solid"></line>
+    <line x1="0" y1="21.12" x2="5.28" y2="21.12" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="0" y2="31.68" class="solid"></line>
+    <line x1="7.92" y1="15.84" x2="44.88" y2="15.84" class="broken"></line>
+    <line x1="42.24" y1="10.56" x2="52.800003" y2="31.68" class="solid"></line>
+    <line x1="47.52" y1="21.12" x2="58.08" y2="21.12" class="solid"></line>
+    <line x1="2.64" y1="26.400002" x2="18.480001" y2="26.400002" class="broken"></line>
+    <line x1="15.84" y1="21.12" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="36.960003" y1="21.12" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="34.32" y1="26.400002" x2="50.160004" y2="26.400002" class="broken"></line>
+    <line x1="52.800003" y1="31.68" x2="58.08" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="5.28" y1="31.68" x2="0" y2="42.24" class="solid"></line>
+    <line x1="2.64" y1="36.960003" x2="50.160004" y2="36.960003" class="broken"></line>
+    <line x1="47.52" y1="31.68" x2="52.800003" y2="42.24" class="solid"></line>
+    <line x1="52.800003" y1="42.24" x2="58.08" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="5.28" y1="42.24" x2="0" y2="52.800003" class="solid"></line>
+    <line x1="2.64" y1="47.52" x2="18.480001" y2="47.52" class="broken"></line>
+    <line x1="15.84" y1="42.24" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="52.800003" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="36.960003" y1="42.24" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="34.32" y1="47.52" x2="50.160004" y2="47.52" class="broken"></line>
+    <line x1="47.52" y1="42.24" x2="52.800003" y2="52.800003" class="solid"></line>
+    <line x1="52.800003" y1="52.800003" x2="58.08" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="5.28" y1="52.800003" x2="0" y2="63.36" class="solid"></line>
+    <line x1="2.64" y1="58.08" x2="18.480001" y2="58.08" class="broken"></line>
+    <line x1="15.84" y1="52.800003" x2="21.12" y2="63.36" class="solid"></line>
+    <line x1="21.12" y1="63.36" x2="31.68" y2="63.36" class="solid"></line>
+    <line x1="36.960003" y1="52.800003" x2="31.68" y2="63.36" class="solid"></line>
+    <line x1="34.32" y1="58.08" x2="50.160004" y2="58.08" class="broken"></line>
+    <line x1="47.52" y1="52.800003" x2="52.800003" y2="63.36" class="solid"></line>
+    <line x1="52.800003" y1="63.36" x2="58.08" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/pattern/relief2.flf b/static/db/contributed/pattern/relief2.flf
similarity index 100%
rename from db/contributed/pattern/relief2.flf
rename to static/db/contributed/pattern/relief2.flf
diff --git a/static/db/contributed/pattern/relief2.svg b/static/db/contributed/pattern/relief2.svg
new file mode 100644
index 0000000..930b5fa
--- /dev/null
+++ b/static/db/contributed/pattern/relief2.svg
@@ -0,0 +1,166 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="84.48" 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="63.36" height="84.48"></rect>
+  <line x1="0" y1="0" x2="5.28" y2="10.56" class="solid"></line>
+  <line x1="42.24" y1="0" x2="58.08" y2="31.68" class="solid"></line>
+  <line x1="47.52" y1="0" x2="58.08" y2="21.12" class="solid"></line>
+  <line x1="52.800003" y1="0" x2="58.08" y2="10.56" class="solid"></line>
+  <line x1="42.24" y1="21.12" x2="31.68" y2="42.24" class="solid"></line>
+  <line x1="52.800003" y1="31.68" x2="58.08" y2="42.24" class="solid"></line>
+  <line x1="52.800003" y1="42.24" x2="58.08" y2="52.800003" class="solid"></line>
+  <line x1="21.12" y1="52.800003" x2="31.68" y2="73.920006" class="solid"></line>
+  <line x1="21.12" y1="63.36" x2="26.400002" y2="73.920006" class="solid"></line>
+  <line x1="52.800003" y1="52.800003" x2="58.08" y2="63.36" class="solid"></line>
+  <line x1="15.84" y1="63.36" x2="21.12" y2="73.920006" class="solid"></line>
+  <line x1="47.52" y1="63.36" x2="52.800003" y2="73.920006" class="solid"></line>
+  <line x1="52.800003" y1="63.36" x2="58.08" y2="73.920006" class="solid"></line>
+  <g>
+    <line x1="5.28" y1="0" x2="10.56" y2="10.56" class="solid"></line>
+    <line x1="0" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="0" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="10.56" y1="0" x2="15.84" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="0" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="0" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="0" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="0" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="21.12" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="31.68" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="47.52" y1="31.68" x2="31.68" y2="63.36" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="36.960003" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="0" x2="31.68" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="26.400002" y2="21.12" class="solid"></line>
+    <line x1="36.960003" y1="0" x2="42.24" y2="10.56" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="47.52" y1="21.12" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="31.68" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="31.68" y1="0" x2="36.960003" y2="10.56" class="solid"></line>
+    <line x1="36.960003" y1="10.56" x2="31.68" y2="21.12" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="31.68" x2="0" y2="63.36" class="solid"></line>
+    <line x1="0" y1="63.36" x2="5.28" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="31.68" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="5.28" y1="63.36" x2="10.56" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="47.52" y1="42.24" x2="36.960003" y2="63.36" class="solid"></line>
+    <line x1="36.960003" y1="63.36" x2="42.24" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="52.800003" x2="10.56" y2="63.36" class="solid"></line>
+    <line x1="10.56" y1="63.36" x2="15.84" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="47.52" y1="52.800003" x2="42.24" y2="63.36" class="solid"></line>
+    <line x1="42.24" y1="63.36" x2="47.52" y2="73.920006" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/pattern/rev.flf b/static/db/contributed/pattern/rev.flf
similarity index 100%
rename from db/contributed/pattern/rev.flf
rename to static/db/contributed/pattern/rev.flf
diff --git a/static/db/contributed/pattern/rev.svg b/static/db/contributed/pattern/rev.svg
new file mode 100644
index 0000000..fe1d640
--- /dev/null
+++ b/static/db/contributed/pattern/rev.svg
@@ -0,0 +1,151 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="126.72" 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="58.08" height="126.72"></rect>
+  <line x1="0" y1="3.96" x2="52.800003" y2="3.96" class="solid"></line>
+  <line x1="0" y1="6.6000004" x2="52.800003" y2="6.6000004" class="solid"></line>
+  <line x1="0" y1="14.52" x2="21.12" y2="14.52" class="solid"></line>
+  <line x1="0" y1="17.16" x2="21.12" y2="17.16" class="solid"></line>
+  <line x1="31.68" y1="14.52" x2="52.800003" y2="14.52" class="solid"></line>
+  <line x1="31.68" y1="17.16" x2="52.800003" y2="17.16" class="solid"></line>
+  <line x1="0" y1="25.080002" x2="15.84" y2="25.080002" class="solid"></line>
+  <line x1="0" y1="27.720001" x2="15.84" y2="27.720001" class="solid"></line>
+  <line x1="36.960003" y1="25.080002" x2="52.800003" y2="25.080002" class="solid"></line>
+  <line x1="36.960003" y1="27.720001" x2="52.800003" y2="27.720001" class="solid"></line>
+  <line x1="0" y1="35.640003" x2="10.56" y2="35.640003" class="solid"></line>
+  <line x1="0" y1="38.280003" x2="10.56" y2="38.280003" class="solid"></line>
+  <line x1="42.24" y1="35.640003" x2="52.800003" y2="35.640003" class="solid"></line>
+  <line x1="42.24" y1="38.280003" x2="52.800003" y2="38.280003" class="solid"></line>
+  <line x1="0" y1="46.2" x2="5.28" y2="46.2" class="solid"></line>
+  <line x1="0" y1="48.84" x2="5.28" y2="48.84" class="solid"></line>
+  <line x1="47.52" y1="46.2" x2="52.800003" y2="46.2" class="solid"></line>
+  <line x1="47.52" y1="48.84" x2="52.800003" y2="48.84" class="solid"></line>
+  <line x1="0" y1="56.760002" x2="5.28" y2="56.760002" class="solid"></line>
+  <line x1="0" y1="59.4" x2="5.28" y2="59.4" class="solid"></line>
+  <line x1="47.52" y1="56.760002" x2="52.800003" y2="56.760002" class="solid"></line>
+  <line x1="47.52" y1="59.4" x2="52.800003" y2="59.4" class="solid"></line>
+  <line x1="0" y1="67.32" x2="5.28" y2="67.32" class="solid"></line>
+  <line x1="0" y1="69.96" x2="5.28" y2="69.96" class="solid"></line>
+  <line x1="47.52" y1="67.32" x2="52.800003" y2="67.32" class="solid"></line>
+  <line x1="47.52" y1="69.96" x2="52.800003" y2="69.96" class="solid"></line>
+  <line x1="0" y1="77.880005" x2="5.28" y2="77.880005" class="solid"></line>
+  <line x1="0" y1="80.520004" x2="5.28" y2="80.520004" class="solid"></line>
+  <line x1="15.84" y1="77.880005" x2="36.960003" y2="77.880005" class="solid"></line>
+  <line x1="15.84" y1="80.520004" x2="36.960003" y2="80.520004" class="solid"></line>
+  <line x1="47.52" y1="77.880005" x2="52.800003" y2="77.880005" class="solid"></line>
+  <line x1="47.52" y1="80.520004" x2="52.800003" y2="80.520004" class="solid"></line>
+  <line x1="0" y1="88.44" x2="5.28" y2="88.44" class="solid"></line>
+  <line x1="0" y1="91.08" x2="5.28" y2="91.08" class="solid"></line>
+  <line x1="15.84" y1="88.44" x2="36.960003" y2="88.44" class="solid"></line>
+  <line x1="15.84" y1="91.08" x2="36.960003" y2="91.08" class="solid"></line>
+  <line x1="47.52" y1="88.44" x2="52.800003" y2="88.44" class="solid"></line>
+  <line x1="47.52" y1="91.08" x2="52.800003" y2="91.08" class="solid"></line>
+  <line x1="0" y1="99.00001" x2="5.28" y2="99.00001" class="solid"></line>
+  <line x1="0" y1="101.64001" x2="5.28" y2="101.64001" class="solid"></line>
+  <line x1="15.84" y1="99.00001" x2="36.960003" y2="99.00001" class="solid"></line>
+  <line x1="15.84" y1="101.64001" x2="36.960003" y2="101.64001" class="solid"></line>
+  <line x1="47.52" y1="99.00001" x2="52.800003" y2="99.00001" class="solid"></line>
+  <line x1="47.52" y1="101.64001" x2="52.800003" y2="101.64001" class="solid"></line>
+  <line x1="0" y1="109.560005" x2="52.800003" y2="109.560005" class="solid"></line>
+  <line x1="0" y1="112.200005" x2="52.800003" y2="112.200005" class="solid"></line>
+  <line x1="21.12" y1="35.640003" x2="31.68" y2="35.640003" class="solid"></line>
+  <line x1="21.12" y1="38.280003" x2="31.68" y2="38.280003" class="solid"></line>
+  <line x1="15.84" y1="46.2" x2="36.960003" y2="46.2" class="solid"></line>
+  <line x1="15.84" y1="48.84" x2="36.960003" y2="48.84" class="solid"></line>
+  <line x1="15.84" y1="56.760002" x2="36.960003" y2="56.760002" class="solid"></line>
+  <line x1="15.84" y1="59.4" x2="36.960003" y2="59.4" class="solid"></line>
+</svg>
diff --git a/db/contributed/pattern/ticks.flf b/static/db/contributed/pattern/ticks.flf
similarity index 100%
rename from db/contributed/pattern/ticks.flf
rename to static/db/contributed/pattern/ticks.flf
diff --git a/static/db/contributed/pattern/ticks.svg b/static/db/contributed/pattern/ticks.svg
new file mode 100644
index 0000000..b91bf62
--- /dev/null
+++ b/static/db/contributed/pattern/ticks.svg
@@ -0,0 +1,156 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="73.920006" 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="79.200005" height="73.920006"></rect>
+  <line x1="0" y1="63.36" x2="73.920006" y2="63.36" class="solid"></line>
+  <g>
+    <line x1="0" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="0" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="0" x2="36.960003" y2="10.56" class="solid"></line>
+    <line x1="42.24" y1="0" x2="36.960003" y2="10.56" class="solid"></line>
+    <line x1="42.24" y1="0" x2="47.52" y2="10.56" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="73.920006" y2="10.56" class="solid"></line>
+    <line x1="0" y1="21.12" x2="15.84" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="15.84" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="26.400002" y2="21.12" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="26.400002" y2="21.12" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="36.960003" y2="21.12" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="36.960003" y2="21.12" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="47.52" y2="21.12" class="solid"></line>
+    <line x1="52.800003" y1="10.56" x2="47.52" y2="21.12" class="solid"></line>
+    <line x1="52.800003" y1="10.56" x2="58.08" y2="21.12" class="solid"></line>
+    <line x1="58.08" y1="21.12" x2="73.920006" y2="21.12" class="solid"></line>
+    <line x1="0" y1="31.68" x2="5.28" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="21.12" x2="5.28" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="21.12" x2="15.84" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="15.84" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="31.68" x2="47.52" y2="31.68" class="solid"></line>
+    <line x1="52.800003" y1="21.12" x2="47.52" y2="31.68" class="solid"></line>
+    <line x1="52.800003" y1="21.12" x2="58.08" y2="31.68" class="solid"></line>
+    <line x1="63.36" y1="21.12" x2="58.08" y2="31.68" class="solid"></line>
+    <line x1="63.36" y1="21.12" x2="68.64" y2="31.68" class="solid"></line>
+    <line x1="68.64" y1="31.68" x2="73.920006" y2="31.68" class="solid"></line>
+    <line x1="0" y1="42.24" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="15.84" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="15.84" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="31.68" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="31.68" y1="31.68" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="42.24" y1="31.68" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="42.24" y1="31.68" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="52.800003" y1="31.68" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="52.800003" y1="31.68" x2="58.08" y2="42.24" class="solid"></line>
+    <line x1="63.36" y1="31.68" x2="58.08" y2="42.24" class="solid"></line>
+    <line x1="63.36" y1="31.68" x2="68.64" y2="42.24" class="solid"></line>
+    <line x1="68.64" y1="42.24" x2="73.920006" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="0" y1="52.800003" x2="5.28" y2="52.800003" class="solid"></line>
+    <line x1="10.56" y1="42.24" x2="5.28" y2="52.800003" class="solid"></line>
+    <line x1="10.56" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="52.800003" x2="47.52" y2="52.800003" class="solid"></line>
+    <line x1="52.800003" y1="42.24" x2="47.52" y2="52.800003" class="solid"></line>
+    <line x1="52.800003" y1="42.24" x2="58.08" y2="52.800003" class="solid"></line>
+    <line x1="63.36" y1="42.24" x2="58.08" y2="52.800003" class="solid"></line>
+    <line x1="63.36" y1="42.24" x2="68.64" y2="52.800003" class="solid"></line>
+    <line x1="68.64" y1="52.800003" x2="73.920006" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/pattern/ticksslant.flf b/static/db/contributed/pattern/ticksslant.flf
similarity index 100%
rename from db/contributed/pattern/ticksslant.flf
rename to static/db/contributed/pattern/ticksslant.flf
diff --git a/static/db/contributed/pattern/ticksslant.svg b/static/db/contributed/pattern/ticksslant.svg
new file mode 100644
index 0000000..9b10eec
--- /dev/null
+++ b/static/db/contributed/pattern/ticksslant.svg
@@ -0,0 +1,132 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="105.600006" height="73.920006" 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="105.600006" height="73.920006"></rect>
+  <line x1="0" y1="63.36" x2="73.920006" y2="63.36" class="solid"></line>
+  <g>
+    <line x1="26.400002" y1="10.56" x2="52.800003" y2="10.56" class="solid"></line>
+    <line x1="58.08" y1="0" x2="47.52" y2="21.12" class="solid"></line>
+    <line x1="58.08" y1="0" x2="79.200005" y2="42.24" class="solid"></line>
+    <line x1="79.200005" y1="42.24" x2="84.48" y2="42.24" class="solid"></line>
+    <line x1="68.64" y1="0" x2="58.08" y2="21.12" class="solid"></line>
+    <line x1="68.64" y1="0" x2="84.48" y2="31.68" class="solid"></line>
+    <line x1="73.920006" y1="10.56" x2="100.32001" y2="10.56" class="solid"></line>
+    <line x1="52.800003" y1="10.56" x2="58.08" y2="21.12" class="solid"></line>
+    <line x1="73.920006" y1="10.56" x2="52.800003" y2="52.800003" class="solid"></line>
+    <line x1="79.200005" y1="21.12" x2="95.04" y2="21.12" class="solid"></line>
+    <line x1="79.200005" y1="21.12" x2="63.36" y2="52.800003" class="solid"></line>
+    <line x1="84.48" y1="31.68" x2="89.76" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="36.960003" y2="21.12" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="47.52" y2="21.12" class="solid"></line>
+    <line x1="36.960003" y1="21.12" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="42.24" y1="31.68" x2="63.36" y2="31.68" class="solid"></line>
+    <line x1="52.800003" y1="31.68" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="52.800003" y1="31.68" x2="63.36" y2="52.800003" class="solid"></line>
+    <line x1="63.36" y1="31.68" x2="73.920006" y2="52.800003" class="solid"></line>
+    <line x1="73.920006" y1="52.800003" x2="79.200005" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="42.24" x2="15.84" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="31.68" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="5.28" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="52.800003" x2="52.800003" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/pattern/usaflag.flf b/static/db/contributed/pattern/usaflag.flf
similarity index 100%
rename from db/contributed/pattern/usaflag.flf
rename to static/db/contributed/pattern/usaflag.flf
diff --git a/static/db/contributed/pattern/usaflag.svg b/static/db/contributed/pattern/usaflag.svg
new file mode 100644
index 0000000..62560b4
--- /dev/null
+++ b/static/db/contributed/pattern/usaflag.svg
@@ -0,0 +1,116 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="63.36" 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="52.800003" height="63.36"></rect>
+  <line x1="7.92" y1="0" x2="7.92" y2="21.12" class="broken"></line>
+  <line x1="13.200001" y1="0" x2="13.200001" y2="21.12" class="broken"></line>
+  <line x1="18.480001" y1="0" x2="18.480001" y2="21.12" class="broken"></line>
+  <line x1="21.12" y1="3.96" x2="42.24" y2="3.96" class="solid"></line>
+  <line x1="21.12" y1="6.6000004" x2="42.24" y2="6.6000004" class="solid"></line>
+  <line x1="31.68" y1="14.52" x2="47.52" y2="14.52" class="solid"></line>
+  <line x1="31.68" y1="17.16" x2="47.52" y2="17.16" class="solid"></line>
+  <line x1="5.28" y1="25.080002" x2="47.52" y2="25.080002" class="solid"></line>
+  <line x1="5.28" y1="27.720001" x2="47.52" y2="27.720001" class="solid"></line>
+  <line x1="5.28" y1="35.640003" x2="21.12" y2="35.640003" class="solid"></line>
+  <line x1="5.28" y1="38.280003" x2="21.12" y2="38.280003" class="solid"></line>
+  <line x1="31.68" y1="35.640003" x2="47.52" y2="35.640003" class="solid"></line>
+  <line x1="31.68" y1="38.280003" x2="47.52" y2="38.280003" class="solid"></line>
+  <line x1="5.28" y1="46.2" x2="21.12" y2="46.2" class="solid"></line>
+  <line x1="5.28" y1="48.84" x2="21.12" y2="48.84" class="solid"></line>
+  <line x1="31.68" y1="46.2" x2="47.52" y2="46.2" class="solid"></line>
+  <line x1="31.68" y1="48.84" x2="47.52" y2="48.84" class="solid"></line>
+</svg>
diff --git a/db/contributed/script/cursive.flf b/static/db/contributed/script/cursive.flf
similarity index 100%
rename from db/contributed/script/cursive.flf
rename to static/db/contributed/script/cursive.flf
diff --git a/static/db/contributed/script/cursive.svg b/static/db/contributed/script/cursive.svg
new file mode 100644
index 0000000..003049b
--- /dev/null
+++ b/static/db/contributed/script/cursive.svg
@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="52.800003" 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="36.960003" height="52.800003"></rect>
+  <g>
+    <line x1="15.84" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="0" y2="42.24" class="solid"></line>
+    <path d="M 26.400002,10.56 A 10.56,10.56 0,0,1 26.400002,21.12" class="nofill"></path>
+    <line x1="7.92" y1="26.400002" x2="23.76" y2="26.400002" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="21.12" y2="31.68" class="solid"></line>
+    <path d="M 21.12,31.68 A 10.56,10.56 0,0,0 21.12,42.24" class="nofill"></path>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/script/hollywood.flf b/static/db/contributed/script/hollywood.flf
similarity index 100%
rename from db/contributed/script/hollywood.flf
rename to static/db/contributed/script/hollywood.flf
diff --git a/static/db/contributed/script/hollywood.svg b/static/db/contributed/script/hollywood.svg
new file mode 100644
index 0000000..da17b2a
--- /dev/null
+++ b/static/db/contributed/script/hollywood.svg
@@ -0,0 +1,126 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <text x="75.240005" y="7.92" >,</text>
+  <line x1="68.64" y1="10.56" x2="63.36" y2="21.12" class="solid"></line>
+  <text x="69.96" y="18.480001" >&#39;</text>
+  <line x1="58.08" y1="21.12" x2="52.800003" y2="31.68" class="solid"></line>
+  <text x="59.4" y="29.04" >&#39;</text>
+  <text x="38.280003" y="39.600002" >,</text>
+  <line x1="47.52" y1="31.68" x2="42.24" y2="42.24" class="solid"></line>
+  <text x="48.84" y="39.600002" >&#39;</text>
+  <line x1="36.960003" y1="42.24" x2="31.68" y2="52.800003" class="solid"></line>
+  <text x="54.120003" y="50.160004" >,</text>
+  <line x1="26.400002" y1="52.800003" x2="21.12" y2="63.36" class="solid"></line>
+  <text x="27.720001" y="60.72" >&#39;</text>
+  <path d="M 5.28,63.36 A 10.56,10.56 0,0,0 5.28,73.920006" class="nofill"></path>
+  <text x="6.6000004" y="71.28001" >,</text>
+  <line x1="15.84" y1="63.36" x2="10.56" y2="73.920006" class="solid"></line>
+  <text x="17.16" y="71.28001" >&#39;</text>
+  <text x="59.4" y="71.28001" >,</text>
+  <g>
+    <line x1="79.200005" y1="10.56" x2="52.800003" y2="63.36" class="solid"></line>
+    <path d="M 52.800003,63.36 A 10.56,10.56 0,0,0 52.800003,73.920006" class="nofill"></path>
+    <line x1="52.800003" y1="73.920006" x2="58.08" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="39.600002" y1="42.24" x2="39.600002" y2="44.88" class="solid"></line>
+    <path d="M 39.600002,44.88 A 2.64,2.64 0,0,0 42.24,47.52" class="nofill"></path>
+    <line x1="42.24" y1="47.52" x2="52.800003" y2="47.52" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/script/invita.flf b/static/db/contributed/script/invita.flf
similarity index 100%
rename from db/contributed/script/invita.flf
rename to static/db/contributed/script/invita.flf
diff --git a/static/db/contributed/script/invita.svg b/static/db/contributed/script/invita.svg
new file mode 100644
index 0000000..86a5139
--- /dev/null
+++ b/static/db/contributed/script/invita.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="63.36" 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="58.08" height="63.36"></rect>
+  <text x="17.16" y="18.480001" >,</text>
+  <g>
+    <line x1="15.84" y1="10.56" x2="44.88" y2="10.56" class="solid"></line>
+    <path d="M 15.84,10.56 A 10.56,10.56 0,0,0 15.84,21.12" class="nofill"></path>
+    <line x1="31.68" y1="10.56" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="44.88" y1="10.56" x2="44.88" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="26.400002" x2="44.88" y2="26.400002" class="solid"></line>
+    <line x1="44.88" y1="42.24" x2="52.800003" y2="42.24" class="solid"></line>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,1 5.28,42.24" class="nofill"></path>
+    <path d="M 5.28,42.24 A 10.56,10.56 0,0,0 5.28,52.800003" class="nofill"></path>
+    <line x1="5.28" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/script/italic.flf b/static/db/contributed/script/italic.flf
similarity index 100%
rename from db/contributed/script/italic.flf
rename to static/db/contributed/script/italic.flf
diff --git a/static/db/contributed/script/italic.svg b/static/db/contributed/script/italic.svg
new file mode 100644
index 0000000..1c2bfe4
--- /dev/null
+++ b/static/db/contributed/script/italic.svg
@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="42.24" 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="26.400002" height="42.24"></rect>
+  <g>
+    <line x1="10.56" y1="10.56" x2="18.480001" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+    <line x1="5.28" y1="21.12" x2="18.480001" y2="21.12" class="solid"></line>
+    <line x1="18.480001" y1="10.56" x2="18.480001" y2="31.68" class="solid"></line>
+    <path d="M 5.28,21.12 A 10.56,10.56 0,0,0 5.28,31.68" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/contributed/script/slscript.flf b/static/db/contributed/script/slscript.flf
similarity index 100%
rename from db/contributed/script/slscript.flf
rename to static/db/contributed/script/slscript.flf
diff --git a/static/db/contributed/script/slscript.svg b/static/db/contributed/script/slscript.svg
new file mode 100644
index 0000000..003049b
--- /dev/null
+++ b/static/db/contributed/script/slscript.svg
@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="52.800003" 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="36.960003" height="52.800003"></rect>
+  <g>
+    <line x1="15.84" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="0" y2="42.24" class="solid"></line>
+    <path d="M 26.400002,10.56 A 10.56,10.56 0,0,1 26.400002,21.12" class="nofill"></path>
+    <line x1="7.92" y1="26.400002" x2="23.76" y2="26.400002" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="21.12" y2="31.68" class="solid"></line>
+    <path d="M 21.12,31.68 A 10.56,10.56 0,0,0 21.12,42.24" class="nofill"></path>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/bell.flf b/static/db/contributed/stroke/bell.flf
similarity index 100%
rename from db/contributed/stroke/bell.flf
rename to static/db/contributed/stroke/bell.flf
diff --git a/static/db/contributed/stroke/bell.svg b/static/db/contributed/stroke/bell.svg
new file mode 100644
index 0000000..c8929e2
--- /dev/null
+++ b/static/db/contributed/stroke/bell.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="63.36" 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="52.800003" height="63.36"></rect>
+  <text x="33" y="39.600002" >&#39;</text>
+  <text x="1.32" y="50.160004" >,&#39;</text>
+  <g>
+    <line x1="29.04" y1="7.92" x2="29.04" y2="15.84" class="solid"></line>
+    <line x1="29.04" y1="15.84" x2="47.52" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="10.56" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="36.960003" x2="31.68" y2="36.960003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/contessa.flf b/static/db/contributed/stroke/contessa.flf
similarity index 100%
rename from db/contributed/stroke/contessa.flf
rename to static/db/contributed/stroke/contessa.flf
diff --git a/static/db/contributed/stroke/contessa.svg b/static/db/contributed/stroke/contessa.svg
new file mode 100644
index 0000000..bea16c2
--- /dev/null
+++ b/static/db/contributed/stroke/contessa.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="42.24" 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="26.400002" height="42.24"></rect>
+  <text x="1.32" y="7.92" >.</text>
+  <line x1="5.28" y1="10.56" x2="15.84" y2="10.56" class="solid"></line>
+  <text x="17.16" y="7.92" >.</text>
+  <text x="1.32" y="18.480001" >[</text>
+  <text x="17.16" y="18.480001" >]</text>
+  <g>
+    <line x1="2.64" y1="21.12" x2="18.480001" y2="21.12" class="solid"></line>
+    <line x1="2.64" y1="21.12" x2="2.64" y2="31.68" class="solid"></line>
+    <line x1="18.480001" y1="21.12" x2="18.480001" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/cyberlarge.flf b/static/db/contributed/stroke/cyberlarge.flf
similarity index 100%
rename from db/contributed/stroke/cyberlarge.flf
rename to static/db/contributed/stroke/cyberlarge.flf
diff --git a/static/db/contributed/stroke/cyberlarge.svg b/static/db/contributed/stroke/cyberlarge.svg
new file mode 100644
index 0000000..c48ac24
--- /dev/null
+++ b/static/db/contributed/stroke/cyberlarge.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="42.24" 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="47.52" height="42.24"></rect>
+  <g>
+    <line x1="5.28" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+    <line x1="7.92" y1="10.56" x2="7.92" y2="31.68" class="solid"></line>
+    <line x1="7.92" y1="21.12" x2="39.600002" y2="21.12" class="solid"></line>
+    <line x1="39.600002" y1="10.56" x2="39.600002" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/cybermedium.flf b/static/db/contributed/stroke/cybermedium.flf
similarity index 100%
rename from db/contributed/stroke/cybermedium.flf
rename to static/db/contributed/stroke/cybermedium.flf
diff --git a/static/db/contributed/stroke/cybermedium.svg b/static/db/contributed/stroke/cybermedium.svg
new file mode 100644
index 0000000..ef90f46
--- /dev/null
+++ b/static/db/contributed/stroke/cybermedium.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="42.24" 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="26.400002" height="42.24"></rect>
+  <g>
+    <line x1="0" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="10.56" x2="2.64" y2="31.68" class="solid"></line>
+    <line x1="2.64" y1="21.12" x2="18.480001" y2="21.12" class="solid"></line>
+    <line x1="18.480001" y1="10.56" x2="18.480001" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/cybersmall.flf b/static/db/contributed/stroke/cybersmall.flf
similarity index 100%
rename from db/contributed/stroke/cybersmall.flf
rename to static/db/contributed/stroke/cybersmall.flf
diff --git a/static/db/contributed/stroke/cybersmall.svg b/static/db/contributed/stroke/cybersmall.svg
new file mode 100644
index 0000000..b08b112
--- /dev/null
+++ b/static/db/contributed/stroke/cybersmall.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="31.68" 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="31.68" height="31.68"></rect>
+  <g>
+    <line x1="5.28" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="7.92" y1="10.56" x2="7.92" y2="21.12" class="solid"></line>
+    <line x1="7.92" y1="15.84" x2="23.76" y2="15.84" class="solid"></line>
+    <line x1="23.76" y1="10.56" x2="23.76" y2="21.12" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/fourtops.flf b/static/db/contributed/stroke/fourtops.flf
similarity index 100%
rename from db/contributed/stroke/fourtops.flf
rename to static/db/contributed/stroke/fourtops.flf
diff --git a/static/db/contributed/stroke/fourtops.svg b/static/db/contributed/stroke/fourtops.svg
new file mode 100644
index 0000000..3d4ff4b
--- /dev/null
+++ b/static/db/contributed/stroke/fourtops.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="42.24" 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="36.960003" height="42.24"></rect>
+  <g>
+    <line x1="15.84" y1="0" x2="0" y2="31.68" class="solid"></line>
+    <line x1="15.84" y1="0" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="5.28" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/maxfour.flf b/static/db/contributed/stroke/maxfour.flf
similarity index 100%
rename from db/contributed/stroke/maxfour.flf
rename to static/db/contributed/stroke/maxfour.flf
diff --git a/static/db/contributed/stroke/maxfour.svg b/static/db/contributed/stroke/maxfour.svg
new file mode 100644
index 0000000..3d4ff4b
--- /dev/null
+++ b/static/db/contributed/stroke/maxfour.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="42.24" 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="36.960003" height="42.24"></rect>
+  <g>
+    <line x1="15.84" y1="0" x2="0" y2="31.68" class="solid"></line>
+    <line x1="15.84" y1="0" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="5.28" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/mike.flf b/static/db/contributed/stroke/mike.flf
similarity index 100%
rename from db/contributed/stroke/mike.flf
rename to static/db/contributed/stroke/mike.flf
diff --git a/static/db/contributed/stroke/mike.svg b/static/db/contributed/stroke/mike.svg
new file mode 100644
index 0000000..27d6c79
--- /dev/null
+++ b/static/db/contributed/stroke/mike.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="31.68" 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="26.400002" height="31.68"></rect>
+  <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+  <line x1="15.84" y1="10.56" x2="10.56" y2="21.12" class="solid"></line>
+  <line x1="18.480001" y1="10.56" x2="18.480001" y2="21.12" class="solid"></line>
+</svg>
diff --git a/db/contributed/stroke/pepper.flf b/static/db/contributed/stroke/pepper.flf
similarity index 100%
rename from db/contributed/stroke/pepper.flf
rename to static/db/contributed/stroke/pepper.flf
diff --git a/static/db/contributed/stroke/pepper.svg b/static/db/contributed/stroke/pepper.svg
new file mode 100644
index 0000000..c8a24b4
--- /dev/null
+++ b/static/db/contributed/stroke/pepper.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="42.24" 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="26.400002" height="42.24"></rect>
+  <g>
+    <line x1="10.56" y1="10.56" x2="15.84" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="0" y2="31.68" class="solid"></line>
+    <line x1="5.28" y1="21.12" x2="15.84" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="10.56" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/short.flf b/static/db/contributed/stroke/short.flf
similarity index 100%
rename from db/contributed/stroke/short.flf
rename to static/db/contributed/stroke/short.flf
diff --git a/static/db/contributed/stroke/short.svg b/static/db/contributed/stroke/short.svg
new file mode 100644
index 0000000..f9f2c52
--- /dev/null
+++ b/static/db/contributed/stroke/short.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="31.68" 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="21.12" height="31.68"></rect>
+  <g>
+    <line x1="10.56" y1="0" x2="0" y2="21.12" class="solid"></line>
+    <line x1="13.200001" y1="0" x2="13.200001" y2="21.12" class="solid"></line>
+    <line x1="2.64" y1="15.84" x2="13.200001" y2="15.84" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/stampatello.flf b/static/db/contributed/stroke/stampatello.flf
similarity index 100%
rename from db/contributed/stroke/stampatello.flf
rename to static/db/contributed/stroke/stampatello.flf
diff --git a/static/db/contributed/stroke/stampatello.svg b/static/db/contributed/stroke/stampatello.svg
new file mode 100644
index 0000000..07c2f69
--- /dev/null
+++ b/static/db/contributed/stroke/stampatello.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="52.800003" 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="47.52" height="52.800003"></rect>
+  <text x="22.44" y="7.92" >,</text>
+  <text x="1.32" y="39.600002" >,&#39;</text>
+  <g>
+    <line x1="29.04" y1="7.92" x2="29.04" y2="34.32" class="solid"></line>
+    <path d="M 29.04,34.32 A 2.64,2.64 0,0,0 31.68,36.960003" class="nofill"></path>
+    <line x1="31.68" y1="36.960003" x2="36.960003" y2="36.960003" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="13.200001" y1="26.400002" x2="36.960003" y2="26.400002" class="broken"></line>
+    <path d="M 36.960003,26.400002 A 2.64,2.64 0,0,1 39.600002,29.04" class="nofill"></path>
+    <line x1="39.600002" y1="29.04" x2="39.600002" y2="34.32" class="solid"></line>
+    <path d="M 39.600002,34.32 A 2.64,2.64 0,0,1 36.960003,36.960003" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/straight.flf b/static/db/contributed/stroke/straight.flf
similarity index 100%
rename from db/contributed/stroke/straight.flf
rename to static/db/contributed/stroke/straight.flf
diff --git a/static/db/contributed/stroke/straight.svg b/static/db/contributed/stroke/straight.svg
new file mode 100644
index 0000000..5f97995
--- /dev/null
+++ b/static/db/contributed/stroke/straight.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="42.24" 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="26.400002" height="42.24"></rect>
+  <g>
+    <line x1="10.56" y1="10.56" x2="0" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="2.64" y1="26.400002" x2="18.480001" y2="26.400002" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/thin.flf b/static/db/contributed/stroke/thin.flf
similarity index 100%
rename from db/contributed/stroke/thin.flf
rename to static/db/contributed/stroke/thin.flf
diff --git a/static/db/contributed/stroke/thin.svg b/static/db/contributed/stroke/thin.svg
new file mode 100644
index 0000000..e3fbd20
--- /dev/null
+++ b/static/db/contributed/stroke/thin.svg
@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="63.36" 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="31.68" height="63.36"></rect>
+  <text x="1.32" y="50.160004" >`</text>
+  <g>
+    <path d="M 5.28,15.84 A 2.64,2.64 0,0,0 2.64,18.480001" class="nofill"></path>
+    <line x1="2.64" y1="18.480001" x2="2.64" y2="42.24" class="solid"></line>
+    <line x1="5.28" y1="15.84" x2="21.12" y2="15.84" class="solid"></line>
+    <path d="M 21.12,15.84 A 2.64,2.64 0,0,1 23.76,18.480001" class="nofill"></path>
+    <line x1="23.76" y1="18.480001" x2="23.76" y2="44.88" class="solid"></line>
+    <line x1="2.64" y1="26.400002" x2="23.76" y2="26.400002" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/threepoint.flf b/static/db/contributed/stroke/threepoint.flf
similarity index 100%
rename from db/contributed/stroke/threepoint.flf
rename to static/db/contributed/stroke/threepoint.flf
diff --git a/static/db/contributed/stroke/threepoint.svg b/static/db/contributed/stroke/threepoint.svg
new file mode 100644
index 0000000..ca8ba57
--- /dev/null
+++ b/static/db/contributed/stroke/threepoint.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="31.68" 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="26.400002" height="31.68"></rect>
+  <g>
+    <line x1="10.56" y1="0" x2="0" y2="21.12" class="solid"></line>
+    <line x1="10.56" y1="0" x2="21.12" y2="21.12" class="solid"></line>
+    <line x1="2.64" y1="15.84" x2="18.480001" y2="15.84" class="broken"></line>
+  </g>
+</svg>
diff --git a/db/contributed/stroke/twopoint.flf b/static/db/contributed/stroke/twopoint.flf
similarity index 100%
rename from db/contributed/stroke/twopoint.flf
rename to static/db/contributed/stroke/twopoint.flf
diff --git a/static/db/contributed/stroke/twopoint.svg b/static/db/contributed/stroke/twopoint.svg
new file mode 100644
index 0000000..1908f63
--- /dev/null
+++ b/static/db/contributed/stroke/twopoint.svg
@@ -0,0 +1,100 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="31.68" 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="21.12" height="31.68"></rect>
+  <rect x="2.64" y="0" width="10.56" height="21.12" class="broken nofill" rx="0"></rect>
+</svg>
diff --git a/db/contributed/stroke/weird.flf b/static/db/contributed/stroke/weird.flf
similarity index 100%
rename from db/contributed/stroke/weird.flf
rename to static/db/contributed/stroke/weird.flf
diff --git a/static/db/contributed/stroke/weird.svg b/static/db/contributed/stroke/weird.svg
new file mode 100644
index 0000000..9aefcb7
--- /dev/null
+++ b/static/db/contributed/stroke/weird.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="63.36" 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="31.68" height="63.36"></rect>
+  <text x="22.44" y="39.600002" >)</text>
+  <line x1="21.12" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+  <g>
+    <line x1="10.56" y1="10.56" x2="23.76" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+    <line x1="23.76" y1="10.56" x2="23.76" y2="31.68" class="solid"></line>
+    <path d="M 2.64,21.12 A 7.92,7.92 0,0,0 2.64,31.68" class="nofill"></path>
+    <line x1="2.64" y1="31.68" x2="23.76" y2="31.68" class="solid"></line>
+    <line x1="2.64" y1="31.68" x2="2.64" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/block/big.flf b/static/db/default/block/big.flf
similarity index 100%
rename from db/default/block/big.flf
rename to static/db/default/block/big.flf
diff --git a/static/db/default/block/big.svg b/static/db/default/block/big.svg
new file mode 100644
index 0000000..8f1582e
--- /dev/null
+++ b/static/db/default/block/big.svg
@@ -0,0 +1,112 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="73.920006" 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="58.08" height="73.920006"></rect>
+  <g>
+    <line x1="26.400002" y1="10.56" x2="0" y2="63.36" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="52.800003" y2="63.36" class="solid"></line>
+    <line x1="0" y1="63.36" x2="10.56" y2="63.36" class="solid"></line>
+    <line x1="15.84" y1="52.800003" x2="36.960003" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="52.800003" x2="10.56" y2="63.36" class="solid"></line>
+    <line x1="36.960003" y1="52.800003" x2="42.24" y2="63.36" class="solid"></line>
+    <line x1="42.24" y1="63.36" x2="52.800003" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="31.68" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="26.400002" y1="31.68" x2="31.68" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/block/slant.flf b/static/db/default/block/slant.flf
similarity index 100%
rename from db/default/block/slant.flf
rename to static/db/default/block/slant.flf
diff --git a/static/db/default/block/slant.svg b/static/db/default/block/slant.svg
new file mode 100644
index 0000000..8077507
--- /dev/null
+++ b/static/db/default/block/slant.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="63.36" 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="47.52" height="63.36"></rect>
+  <line x1="26.400002" y1="21.12" x2="21.12" y2="31.68" class="solid"></line>
+  <line x1="29.04" y1="21.12" x2="29.04" y2="31.68" class="solid"></line>
+  <g>
+    <line x1="21.12" y1="10.56" x2="39.600002" y2="10.56" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="0" y2="52.800003" class="solid"></line>
+    <line x1="39.600002" y1="10.56" x2="39.600002" y2="52.800003" class="solid"></line>
+    <line x1="0" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="29.04" y1="42.24" x2="29.04" y2="52.800003" class="solid"></line>
+    <line x1="29.04" y1="52.800003" x2="39.600002" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/block/small.flf b/static/db/default/block/small.flf
similarity index 100%
rename from db/default/block/small.flf
rename to static/db/default/block/small.flf
diff --git a/static/db/default/block/small.svg b/static/db/default/block/small.svg
new file mode 100644
index 0000000..275a8a0
--- /dev/null
+++ b/static/db/default/block/small.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="52.800003" 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="42.24" height="52.800003"></rect>
+  <g>
+    <line x1="15.84" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="0" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="0" y1="42.24" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="15.84" y1="31.68" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="36.960003" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/block/smslant.flf b/static/db/default/block/smslant.flf
similarity index 100%
rename from db/default/block/smslant.flf
rename to static/db/default/block/smslant.flf
diff --git a/static/db/default/block/smslant.svg b/static/db/default/block/smslant.svg
new file mode 100644
index 0000000..9ef2e4f
--- /dev/null
+++ b/static/db/default/block/smslant.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="52.800003" 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="42.24" height="52.800003"></rect>
+  <line x1="21.12" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+  <g>
+    <line x1="15.84" y1="10.56" x2="34.32" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="0" y2="42.24" class="solid"></line>
+    <line x1="34.32" y1="10.56" x2="34.32" y2="42.24" class="solid"></line>
+    <line x1="0" y1="42.24" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="31.68" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="15.84" y1="31.68" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="31.68" x2="23.76" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="42.24" x2="34.32" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/block/standard.flf b/static/db/default/block/standard.flf
similarity index 100%
rename from db/default/block/standard.flf
rename to static/db/default/block/standard.flf
diff --git a/static/db/default/block/standard.svg b/static/db/default/block/standard.svg
new file mode 100644
index 0000000..02b2d01
--- /dev/null
+++ b/static/db/default/block/standard.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="63.36" 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="52.800003" height="63.36"></rect>
+  <line x1="21.12" y1="31.68" x2="26.400002" y2="31.68" class="solid"></line>
+  <g>
+    <line x1="21.12" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="0" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="47.52" y2="52.800003" class="solid"></line>
+    <line x1="0" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="42.24" x2="36.960003" y2="52.800003" class="solid"></line>
+    <line x1="36.960003" y1="52.800003" x2="47.52" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/code/term.flf b/static/db/default/code/term.flf
similarity index 100%
rename from db/default/code/term.flf
rename to static/db/default/code/term.flf
diff --git a/db/default/directions/ivrit.flf b/static/db/default/directions/ivrit.flf
similarity index 100%
rename from db/default/directions/ivrit.flf
rename to static/db/default/directions/ivrit.flf
diff --git a/db/default/effect/shadow.flf b/static/db/default/effect/shadow.flf
similarity index 100%
rename from db/default/effect/shadow.flf
rename to static/db/default/effect/shadow.flf
diff --git a/static/db/default/effect/shadow.svg b/static/db/default/effect/shadow.svg
new file mode 100644
index 0000000..925f37b
--- /dev/null
+++ b/static/db/default/effect/shadow.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="52.800003" 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="47.52" height="52.800003"></rect>
+  <line x1="15.84" y1="21.12" x2="21.12" y2="21.12" class="solid"></line>
+  <g>
+    <line x1="21.12" y1="0" x2="42.24" y2="42.24" class="solid"></line>
+    <line x1="31.68" y1="42.24" x2="42.24" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="10.56" y1="31.68" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="0" y1="42.24" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="5.28" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/effect/smshadow.flf b/static/db/default/effect/smshadow.flf
similarity index 100%
rename from db/default/effect/smshadow.flf
rename to static/db/default/effect/smshadow.flf
diff --git a/static/db/default/effect/smshadow.svg b/static/db/default/effect/smshadow.svg
new file mode 100644
index 0000000..718eca8
--- /dev/null
+++ b/static/db/default/effect/smshadow.svg
@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="42.24" 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="36.960003" height="42.24"></rect>
+  <g>
+    <line x1="15.84" y1="0" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="31.68" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="10.56" y1="21.12" x2="15.84" y2="21.12" class="solid"></line>
+    <line x1="0" y1="31.68" x2="5.28" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="21.12" x2="5.28" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/fill/banner.flf b/static/db/default/fill/banner.flf
similarity index 100%
rename from db/default/fill/banner.flf
rename to static/db/default/fill/banner.flf
diff --git a/static/db/default/fill/banner.svg b/static/db/default/fill/banner.svg
new file mode 100644
index 0000000..745f34e
--- /dev/null
+++ b/static/db/default/fill/banner.svg
@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="84.48" 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="42.24" height="84.48"></rect>
+  <text x="17.16" y="7.92" >#</text>
+  <text x="11.88" y="18.480001" >#</text>
+  <text x="22.44" y="18.480001" >#</text>
+  <text x="6.6000004" y="29.04" >#</text>
+  <text x="27.720001" y="29.04" >#</text>
+  <rect x="0" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="39.600002" x2="2.64" y2="44.88" class="solid"></line>
+  <rect x="31.68" y="34.32" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="39.600002" x2="34.32" y2="44.88" class="solid"></line>
+  <rect x="0" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="50.160004" x2="2.64" y2="55.440002" class="solid"></line>
+  <rect x="5.28" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="44.88" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="15.84" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="21.12" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="26.400002" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="50.160004" x2="34.32" y2="55.440002" class="solid"></line>
+  <rect x="0" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="60.72" x2="2.64" y2="66" class="solid"></line>
+  <rect x="31.68" y="55.440002" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="60.72" x2="34.32" y2="66" class="solid"></line>
+  <rect x="0" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="66" width="5.2800026" height="5.2800064" class="solid filled" rx="0"></rect>
+</svg>
diff --git a/db/default/frame/bubble.flf b/static/db/default/frame/bubble.flf
similarity index 100%
rename from db/default/frame/bubble.flf
rename to static/db/default/frame/bubble.flf
diff --git a/db/default/frame/digital.flf b/static/db/default/frame/digital.flf
similarity index 100%
rename from db/default/frame/digital.flf
rename to static/db/default/frame/digital.flf
diff --git a/db/default/pattern/block.flf b/static/db/default/pattern/block.flf
similarity index 100%
rename from db/default/pattern/block.flf
rename to static/db/default/pattern/block.flf
diff --git a/static/db/default/pattern/block.svg b/static/db/default/pattern/block.svg
new file mode 100644
index 0000000..363cba7
--- /dev/null
+++ b/static/db/default/pattern/block.svg
@@ -0,0 +1,117 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="73.920006" 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="47.52" height="73.920006"></rect>
+  <g>
+    <line x1="7.92" y1="21.12" x2="29.04" y2="21.12" class="solid"></line>
+    <line x1="18.480001" y1="10.56" x2="18.480001" y2="21.12" class="solid"></line>
+    <line x1="29.04" y1="10.56" x2="29.04" y2="21.12" class="solid"></line>
+    <line x1="0" y1="31.68" x2="7.92" y2="31.68" class="solid"></line>
+    <line x1="7.92" y1="21.12" x2="7.92" y2="63.36" class="solid"></line>
+    <line x1="0" y1="52.800003" x2="7.92" y2="52.800003" class="solid"></line>
+    <line x1="0" y1="63.36" x2="7.92" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <line x1="29.04" y1="31.68" x2="39.600002" y2="31.68" class="solid"></line>
+    <line x1="39.600002" y1="21.12" x2="39.600002" y2="63.36" class="solid"></line>
+    <line x1="0" y1="42.24" x2="39.600002" y2="42.24" class="solid"></line>
+    <line x1="18.480001" y1="31.68" x2="18.480001" y2="42.24" class="solid"></line>
+    <line x1="29.04" y1="31.68" x2="29.04" y2="42.24" class="solid"></line>
+    <line x1="31.68" y1="52.800003" x2="39.600002" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="63.36" x2="39.600002" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/pattern/lean.flf b/static/db/default/pattern/lean.flf
similarity index 100%
rename from db/default/pattern/lean.flf
rename to static/db/default/pattern/lean.flf
diff --git a/static/db/default/pattern/lean.svg b/static/db/default/pattern/lean.svg
new file mode 100644
index 0000000..630762f
--- /dev/null
+++ b/static/db/default/pattern/lean.svg
@@ -0,0 +1,119 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="73.920006" 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="63.36" height="73.920006"></rect>
+  <g>
+    <line x1="31.68" y1="21.12" x2="47.52" y2="21.12" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="36.960003" y2="21.12" class="solid"></line>
+    <line x1="52.800003" y1="10.56" x2="47.52" y2="21.12" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="5.28" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="0" y1="63.36" x2="5.28" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <line x1="47.52" y1="31.68" x2="52.800003" y2="31.68" class="solid"></line>
+    <line x1="58.08" y1="21.12" x2="36.960003" y2="63.36" class="solid"></line>
+    <line x1="10.56" y1="42.24" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="31.68" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="42.24" y1="31.68" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="36.960003" y1="52.800003" x2="42.24" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="63.36" x2="36.960003" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/script/script.flf b/static/db/default/script/script.flf
similarity index 100%
rename from db/default/script/script.flf
rename to static/db/default/script/script.flf
diff --git a/static/db/default/script/script.svg b/static/db/default/script/script.svg
new file mode 100644
index 0000000..e5fd8f0
--- /dev/null
+++ b/static/db/default/script/script.svg
@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="63.36" 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="47.52" height="63.36"></rect>
+  <text x="27.720001" y="7.92" >,</text>
+  <text x="1.32" y="29.04" >|</text>
+  <g>
+    <line x1="10.56" y1="10.56" x2="29.04" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+    <line x1="29.04" y1="10.56" x2="29.04" y2="36.960003" class="solid"></line>
+    <line x1="29.04" y1="36.960003" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="52.800003" x2="36.960003" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="42.24" x2="36.960003" y2="52.800003" class="solid"></line>
+    <line x1="2.64" y1="31.68" x2="2.64" y2="36.960003" class="solid"></line>
+    <line x1="2.64" y1="36.960003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="10.56" y1="52.800003" x2="21.12" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/script/smscript.flf b/static/db/default/script/smscript.flf
similarity index 100%
rename from db/default/script/smscript.flf
rename to static/db/default/script/smscript.flf
diff --git a/static/db/default/script/smscript.svg b/static/db/default/script/smscript.svg
new file mode 100644
index 0000000..23f0cdc
--- /dev/null
+++ b/static/db/default/script/smscript.svg
@@ -0,0 +1,112 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="52.800003" 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="42.24" height="52.800003"></rect>
+  <text x="22.44" y="7.92" >,</text>
+  <g>
+    <line x1="10.56" y1="10.56" x2="23.76" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+    <line x1="23.76" y1="10.56" x2="23.76" y2="26.400002" class="solid"></line>
+    <line x1="23.76" y1="26.400002" x2="15.84" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <line x1="36.960003" y1="31.68" x2="31.68" y2="42.24" class="solid"></line>
+    <line x1="2.64" y1="21.12" x2="2.64" y2="26.400002" class="solid"></line>
+    <line x1="2.64" y1="26.400002" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="42.24" x2="15.84" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/default/stroke/mini.flf b/static/db/default/stroke/mini.flf
similarity index 100%
rename from db/default/stroke/mini.flf
rename to static/db/default/stroke/mini.flf
diff --git a/static/db/default/stroke/mini.svg b/static/db/default/stroke/mini.svg
new file mode 100644
index 0000000..5f97995
--- /dev/null
+++ b/static/db/default/stroke/mini.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="42.24" 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="26.400002" height="42.24"></rect>
+  <g>
+    <line x1="10.56" y1="10.56" x2="0" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="2.64" y1="26.400002" x2="18.480001" y2="26.400002" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/3d/3d_diagonal.flf b/static/db/jave/3d/3d_diagonal.flf
similarity index 100%
rename from db/jave/3d/3d_diagonal.flf
rename to static/db/jave/3d/3d_diagonal.flf
diff --git a/static/db/jave/3d/3d_diagonal.svg b/static/db/jave/3d/3d_diagonal.svg
new file mode 100644
index 0000000..6e9fe30
--- /dev/null
+++ b/static/db/jave/3d/3d_diagonal.svg
@@ -0,0 +1,144 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="158.40001" 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="84.48" height="158.40001"></rect>
+  <text x="17.16" y="29.04" >,</text>
+  <line x1="21.12" y1="26.400002" x2="36.960003" y2="26.400002" class="solid"></line>
+  <text x="38.280003" y="29.04" >,</text>
+  <text x="11.88" y="39.600002" >&#39;</text>
+  <text x="27.720001" y="39.600002" >.&#39;</text>
+  <line x1="10.56" y1="42.24" x2="5.28" y2="52.800003" class="solid"></line>
+  <text x="22.44" y="50.160004" >;</text>
+  <text x="48.84" y="50.160004" >&#39;</text>
+  <line x1="2.64" y1="52.800003" x2="2.64" y2="97.68" class="broken"></line>
+  <text x="33" y="81.840004" >&#39;</text>
+  <text x="43.56" y="81.840004" >;.</text>
+  <text x="69.96" y="81.840004" >:</text>
+  <text x="33" y="92.4" >;</text>
+  <line x1="42.24" y1="84.48" x2="36.960003" y2="95.04" class="solid"></line>
+  <line x1="73.920006" y1="84.48" x2="79.200005" y2="95.04" class="solid"></line>
+  <text x="33" y="102.96001" >|</text>
+  <text x="69.96" y="102.96001" >,&#39;</text>
+  <line x1="34.32" y1="105.600006" x2="34.32" y2="108.240005" class="solid"></line>
+  <text x="33" y="124.08" >:</text>
+  <text x="27.720001" y="134.64" >,</text>
+  <line x1="34.32" y1="126.72" x2="34.32" y2="129.36" class="solid"></line>
+  <text x="22.44" y="145.20001" >&#39;</text>
+  <g>
+    <line x1="42.24" y1="31.68" x2="47.52" y2="42.24" class="solid"></line>
+    <path d="M 47.52,42.24 A 21.12,21.12 0,0,1 58.08,52.800003" class="nofill"></path>
+    <line x1="58.08" y1="52.800003" x2="68.64" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="18.480001" y1="52.800003" x2="18.480001" y2="139.92" class="broken"></line>
+    <line x1="2.64" y1="105.600006" x2="2.64" y2="139.92" class="solid"></line>
+    <path d="M 2.64,139.92 A 2.64,2.64 0,0,0 5.28,142.56001" class="nofill"></path>
+    <line x1="5.28" y1="142.56001" x2="15.84" y2="142.56001" class="solid"></line>
+    <path d="M 18.480001,139.92 A 2.64,2.64 0,0,1 15.84,142.56001" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="42.24" y1="63.36" x2="36.960003" y2="73.920006" class="solid"></line>
+    <line x1="42.24" y1="63.36" x2="47.52" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="52.800003" y1="84.48" x2="64.68" y2="108.240005" class="solid"></line>
+    <line x1="42.24" y1="95.04" x2="48.84" y2="108.240005" class="solid"></line>
+    <path d="M 48.84,108.240005 A 5.28,5.28 0,0,0 52.800003,110.880005" class="nofill"></path>
+    <line x1="52.800003" y1="110.880005" x2="63.36" y2="110.880005" class="solid"></line>
+    <path d="M 64.68,108.240005 A 1.98,1.98 0,0,1 63.36,110.880005" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/3d/alpha.flf b/static/db/jave/3d/alpha.flf
similarity index 100%
rename from db/jave/3d/alpha.flf
rename to static/db/jave/3d/alpha.flf
diff --git a/static/db/jave/3d/alpha.svg b/static/db/jave/3d/alpha.svg
new file mode 100644
index 0000000..404e5e2
--- /dev/null
+++ b/static/db/jave/3d/alpha.svg
@@ -0,0 +1,193 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="137.28" height="232.32" 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="137.28" height="232.32"></rect>
+  <g>
+    <line x1="52.800003" y1="10.56" x2="79.200005" y2="10.56" class="solid"></line>
+    <line x1="52.800003" y1="10.56" x2="50.160004" y2="15.84" class="solid"></line>
+    <line x1="50.160004" y1="15.84" x2="50.160004" y2="52.800003" class="broken"></line>
+    <line x1="52.800003" y1="10.56" x2="97.68" y2="100.32001" class="solid"></line>
+    <line x1="55.440002" y1="15.84" x2="55.440002" y2="52.800003" class="broken"></line>
+    <line x1="79.200005" y1="10.56" x2="121.44" y2="95.04" class="solid"></line>
+    <line x1="60.72" y1="26.400002" x2="60.72" y2="63.36" class="broken"></line>
+    <line x1="66" y1="36.960003" x2="66" y2="73.920006" class="broken"></line>
+    <line x1="71.28001" y1="47.52" x2="71.28001" y2="84.48" class="broken"></line>
+    <line x1="76.560005" y1="58.08" x2="76.560005" y2="95.04" class="broken"></line>
+    <line x1="81.840004" y1="68.64" x2="81.840004" y2="105.600006" class="broken"></line>
+    <line x1="87.12" y1="79.200005" x2="87.12" y2="147.84001" class="broken"></line>
+    <line x1="92.4" y1="89.76" x2="92.4" y2="137.28" class="broken"></line>
+    <line x1="95.04" y1="95.04" x2="105.600006" y2="116.16" class="solid"></line>
+    <line x1="97.68" y1="100.32001" x2="97.68" y2="126.72" class="broken"></line>
+    <line x1="121.44" y1="95.04" x2="132" y2="116.16" class="solid"></line>
+    <line x1="105.600006" y1="116.16" x2="132" y2="116.16" class="solid"></line>
+    <line x1="105.600006" y1="116.16" x2="63.36" y2="200.64001" class="solid"></line>
+    <line x1="132" y1="116.16" x2="89.76" y2="200.64001" class="solid"></line>
+    <line x1="89.76" y1="200.64001" x2="79.200005" y2="221.76001" class="solid"></line>
+    <line x1="47.52" y1="190.08" x2="42.24" y2="200.64001" class="solid"></line>
+    <line x1="42.24" y1="200.64001" x2="52.800003" y2="221.76001" class="solid"></line>
+    <line x1="63.36" y1="200.64001" x2="52.800003" y2="221.76001" class="solid"></line>
+    <line x1="52.800003" y1="221.76001" x2="79.200005" y2="221.76001" class="solid"></line>
+  </g>
+  <g>
+    <line x1="47.52" y1="21.12" x2="44.88" y2="26.400002" class="solid"></line>
+    <line x1="44.88" y1="26.400002" x2="44.88" y2="63.36" class="broken"></line>
+  </g>
+  <g>
+    <line x1="42.24" y1="31.68" x2="39.600002" y2="36.960003" class="solid"></line>
+    <line x1="39.600002" y1="36.960003" x2="39.600002" y2="105.600006" class="broken"></line>
+  </g>
+  <g>
+    <line x1="36.960003" y1="42.24" x2="34.32" y2="47.52" class="solid"></line>
+    <line x1="34.32" y1="47.52" x2="34.32" y2="95.04" class="broken"></line>
+  </g>
+  <g>
+    <line x1="31.68" y1="52.800003" x2="29.04" y2="58.08" class="solid"></line>
+    <line x1="29.04" y1="58.08" x2="29.04" y2="95.04" class="broken"></line>
+  </g>
+  <g>
+    <line x1="52.800003" y1="52.800003" x2="42.24" y2="73.920006" class="solid"></line>
+    <line x1="52.800003" y1="52.800003" x2="84.48" y2="116.16" class="solid"></line>
+    <line x1="42.24" y1="73.920006" x2="63.36" y2="73.920006" class="solid"></line>
+    <line x1="42.24" y1="73.920006" x2="73.920006" y2="137.28" class="solid"></line>
+    <line x1="44.88" y1="79.200005" x2="44.88" y2="116.16" class="broken"></line>
+    <line x1="50.160004" y1="89.76" x2="50.160004" y2="126.72" class="broken"></line>
+    <line x1="55.440002" y1="100.32001" x2="55.440002" y2="137.28" class="broken"></line>
+    <line x1="60.72" y1="110.880005" x2="60.72" y2="147.84001" class="broken"></line>
+    <line x1="66" y1="121.44" x2="66" y2="190.08" class="broken"></line>
+    <line x1="84.48" y1="116.16" x2="81.840004" y2="121.44" class="solid"></line>
+    <line x1="81.840004" y1="121.44" x2="81.840004" y2="158.40001" class="broken"></line>
+    <line x1="71.28001" y1="132" x2="71.28001" y2="179.52" class="broken"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="63.36" x2="23.76" y2="68.64" class="solid"></line>
+    <line x1="23.76" y1="68.64" x2="23.76" y2="105.600006" class="broken"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="73.920006" x2="18.480001" y2="79.200005" class="solid"></line>
+    <line x1="18.480001" y1="79.200005" x2="18.480001" y2="116.16" class="broken"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="84.48" x2="13.200001" y2="89.76" class="solid"></line>
+    <line x1="13.200001" y1="89.76" x2="13.200001" y2="126.72" class="broken"></line>
+  </g>
+  <g>
+    <line x1="10.56" y1="95.04" x2="7.92" y2="100.32001" class="solid"></line>
+    <line x1="7.92" y1="100.32001" x2="7.92" y2="126.72" class="broken"></line>
+  </g>
+  <g>
+    <line x1="31.68" y1="95.04" x2="10.56" y2="137.28" class="solid"></line>
+    <line x1="31.68" y1="95.04" x2="63.36" y2="158.40001" class="solid"></line>
+    <line x1="63.36" y1="158.40001" x2="60.72" y2="163.68001" class="solid"></line>
+    <line x1="60.72" y1="163.68001" x2="60.72" y2="200.64001" class="broken"></line>
+    <line x1="5.28" y1="105.600006" x2="0" y2="116.16" class="solid"></line>
+    <line x1="0" y1="116.16" x2="10.56" y2="137.28" class="solid"></line>
+    <line x1="10.56" y1="137.28" x2="36.960003" y2="137.28" class="solid"></line>
+    <line x1="42.24" y1="126.72" x2="36.960003" y2="137.28" class="solid"></line>
+  </g>
+  <g>
+    <line x1="79.200005" y1="126.72" x2="76.560005" y2="132" class="solid"></line>
+    <line x1="76.560005" y1="132" x2="76.560005" y2="168.96" class="broken"></line>
+  </g>
+  <g>
+    <line x1="58.08" y1="168.96" x2="55.440002" y2="174.24" class="solid"></line>
+    <line x1="55.440002" y1="174.24" x2="55.440002" y2="211.20001" class="broken"></line>
+  </g>
+  <g>
+    <line x1="52.800003" y1="179.52" x2="50.160004" y2="184.8" class="solid"></line>
+    <line x1="50.160004" y1="184.8" x2="50.160004" y2="211.20001" class="broken"></line>
+  </g>
+</svg>
diff --git a/db/jave/3d/blocks.flf b/static/db/jave/3d/blocks.flf
similarity index 100%
rename from db/jave/3d/blocks.flf
rename to static/db/jave/3d/blocks.flf
diff --git a/static/db/jave/3d/blocks.svg b/static/db/jave/3d/blocks.svg
new file mode 100644
index 0000000..613b241
--- /dev/null
+++ b/static/db/jave/3d/blocks.svg
@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="110.880005" height="126.72" 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="110.880005" height="126.72"></rect>
+  <rect x="2.64" y="5.28" width="100.32001" height="105.600006" class="solid nofill" rx="5.28"></rect>
+  <rect x="13.200001" y="15.84" width="79.2" height="84.48001" class="solid nofill" rx="2.64"></rect>
+  <g>
+    <line x1="47.52" y1="31.68" x2="58.08" y2="31.68" class="solid"></line>
+    <line x1="47.52" y1="31.68" x2="26.400002" y2="73.920006" class="solid"></line>
+    <line x1="58.08" y1="31.68" x2="79.200005" y2="73.920006" class="solid"></line>
+    <line x1="18.480001" y1="73.920006" x2="26.400002" y2="73.920006" class="solid"></line>
+    <line x1="79.200005" y1="73.920006" x2="87.12" y2="73.920006" class="solid"></line>
+    <line x1="18.480001" y1="73.920006" x2="18.480001" y2="84.48" class="solid"></line>
+    <line x1="18.480001" y1="84.48" x2="44.88" y2="84.48" class="solid"></line>
+    <line x1="44.88" y1="73.920006" x2="44.88" y2="84.48" class="solid"></line>
+    <line x1="60.72" y1="73.920006" x2="60.72" y2="84.48" class="solid"></line>
+    <line x1="60.72" y1="84.48" x2="87.12" y2="84.48" class="solid"></line>
+    <line x1="87.12" y1="73.920006" x2="87.12" y2="84.48" class="solid"></line>
+  </g>
+  <g>
+    <line x1="52.800003" y1="42.24" x2="47.52" y2="52.800003" class="solid"></line>
+    <line x1="52.800003" y1="42.24" x2="58.08" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="42.24" y1="63.36" x2="63.36" y2="63.36" class="solid"></line>
+    <line x1="42.24" y1="63.36" x2="36.960003" y2="73.920006" class="solid"></line>
+    <line x1="63.36" y1="63.36" x2="68.64" y2="73.920006" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/3d/chiseled.flf b/static/db/jave/3d/chiseled.flf
similarity index 100%
rename from db/jave/3d/chiseled.flf
rename to static/db/jave/3d/chiseled.flf
diff --git a/static/db/jave/3d/chiseled.svg b/static/db/jave/3d/chiseled.svg
new file mode 100644
index 0000000..8dfdb7c
--- /dev/null
+++ b/static/db/jave/3d/chiseled.svg
@@ -0,0 +1,167 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="73.920006" height="105.600006" 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="73.920006" height="105.600006"></rect>
+  <text x="17.16" y="7.92" >,</text>
+  <text x="6.6000004" y="18.480001" >.</text>
+  <line x1="10.56" y1="15.84" x2="21.12" y2="15.84" class="solid"></line>
+  <text x="22.44" y="18.480001" >.&#39;</text>
+  <line x1="10.56" y1="25.080002" x2="21.12" y2="25.080002" class="solid"></line>
+  <line x1="10.56" y1="27.720001" x2="21.12" y2="27.720001" class="solid"></line>
+  <line x1="10.56" y1="35.640003" x2="21.12" y2="35.640003" class="solid"></line>
+  <line x1="10.56" y1="38.280003" x2="21.12" y2="38.280003" class="solid"></line>
+  <line x1="10.56" y1="46.2" x2="21.12" y2="46.2" class="solid"></line>
+  <line x1="10.56" y1="48.84" x2="21.12" y2="48.84" class="solid"></line>
+  <text x="27.720001" y="50.160004" >,</text>
+  <line x1="47.52" y1="47.52" x2="52.800003" y2="47.52" class="solid"></line>
+  <line x1="10.56" y1="56.760002" x2="21.12" y2="56.760002" class="solid"></line>
+  <line x1="10.56" y1="59.4" x2="21.12" y2="59.4" class="solid"></line>
+  <line x1="31.68" y1="58.08" x2="36.960003" y2="58.08" class="solid"></line>
+  <text x="54.120003" y="60.72" >,</text>
+  <line x1="5.28" y1="67.32" x2="15.84" y2="67.32" class="solid"></line>
+  <line x1="5.28" y1="69.96" x2="15.84" y2="69.96" class="solid"></line>
+  <line x1="52.800003" y1="68.64" x2="58.08" y2="68.64" class="solid"></line>
+  <line x1="5.28" y1="77.880005" x2="15.84" y2="77.880005" class="solid"></line>
+  <line x1="5.28" y1="80.520004" x2="15.84" y2="80.520004" class="solid"></line>
+  <line x1="26.400002" y1="84.48" x2="31.68" y2="84.48" class="solid"></line>
+  <text x="33" y="81.840004" >.</text>
+  <line x1="42.24" y1="77.880005" x2="47.52" y2="77.880005" class="solid"></line>
+  <line x1="42.24" y1="80.520004" x2="47.52" y2="80.520004" class="solid"></line>
+  <text x="54.120003" y="81.840004" >.</text>
+  <line x1="58.08" y1="79.200005" x2="63.36" y2="79.200005" class="solid"></line>
+  <text x="64.68" y="81.840004" >&#39;</text>
+  <text x="22.44" y="92.4" >`</text>
+  <g>
+    <line x1="21.12" y1="5.28" x2="36.960003" y2="5.28" class="solid"></line>
+    <path d="M 36.960003,5.28 A 5.28,5.28 0,0,1 40.920002,7.92" class="nofill"></path>
+    <line x1="40.920002" y1="7.92" x2="52.800003" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="5.28" y1="21.12" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="5.28" y1="42.24" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="10.56" y1="52.800003" x2="0" y2="73.920006" class="solid"></line>
+    <line x1="0" y1="73.920006" x2="6.6000004" y2="87.12" class="solid"></line>
+    <path d="M 6.6000004,87.12 A 5.28,5.28 0,0,0 10.56,89.76" class="nofill"></path>
+    <line x1="10.56" y1="89.76" x2="21.12" y2="89.76" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="23.76" y1="26.400002" x2="34.32" y2="26.400002" class="solid"></line>
+    <line x1="36.960003" y1="21.12" x2="34.32" y2="26.400002" class="solid"></line>
+    <line x1="34.32" y1="26.400002" x2="34.32" y2="42.24" class="solid"></line>
+    <line x1="36.960003" y1="21.12" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="26.400002" y1="31.68" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="36.960003" x2="34.32" y2="36.960003" class="solid"></line>
+    <line x1="34.32" y1="42.24" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="52.800003" x2="15.84" y2="73.920006" class="solid"></line>
+    <line x1="18.480001" y1="68.64" x2="26.400002" y2="68.64" class="solid"></line>
+    <line x1="15.84" y1="73.920006" x2="21.12" y2="84.48" class="solid"></line>
+  </g>
+  <g>
+    <line x1="55.440002" y1="31.68" x2="55.440002" y2="36.960003" class="solid"></line>
+    <line x1="55.440002" y1="36.960003" x2="60.72" y2="47.52" class="solid"></line>
+    <line x1="60.72" y1="47.52" x2="60.72" y2="58.08" class="solid"></line>
+    <line x1="60.72" y1="58.08" x2="68.64" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="42.24" y1="63.36" x2="36.960003" y2="73.920006" class="solid"></line>
+    <line x1="42.24" y1="63.36" x2="52.800003" y2="84.48" class="solid"></line>
+    <line x1="36.960003" y1="73.920006" x2="42.24" y2="84.48" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/3d/henry3d.flf b/static/db/jave/3d/henry3d.flf
similarity index 100%
rename from db/jave/3d/henry3d.flf
rename to static/db/jave/3d/henry3d.flf
diff --git a/static/db/jave/3d/henry3d.svg b/static/db/jave/3d/henry3d.svg
new file mode 100644
index 0000000..2c16c45
--- /dev/null
+++ b/static/db/jave/3d/henry3d.svg
@@ -0,0 +1,129 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="84.48" 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="63.36" height="84.48"></rect>
+  <line x1="21.12" y1="42.24" x2="36.960003" y2="42.24" class="solid"></line>
+  <text x="17.16" y="50.160004" >L</text>
+  <line x1="21.12" y1="52.800003" x2="36.960003" y2="52.800003" class="solid"></line>
+  <text x="38.280003" y="50.160004" >J</text>
+  <text x="1.32" y="60.72" >J</text>
+  <text x="17.16" y="60.72" >L</text>
+  <text x="38.280003" y="60.72" >J</text>
+  <text x="54.120003" y="60.72" >L</text>
+  <text x="17.16" y="71.28001" >L</text>
+  <text x="38.280003" y="71.28001" >J</text>
+  <g>
+    <line x1="26.400002" y1="10.56" x2="31.68" y2="10.56" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="5.28" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="52.800003" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="29.04" y1="15.84" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="29.04" y1="15.84" x2="36.960003" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="36.960003" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="2.64" y1="63.36" x2="15.84" y2="63.36" class="solid"></line>
+    <line x1="2.64" y1="63.36" x2="2.64" y2="73.920006" class="solid"></line>
+    <line x1="2.64" y1="73.920006" x2="15.84" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="42.24" y1="63.36" x2="55.440002" y2="63.36" class="solid"></line>
+    <line x1="42.24" y1="73.920006" x2="55.440002" y2="73.920006" class="solid"></line>
+    <line x1="55.440002" y1="63.36" x2="55.440002" y2="73.920006" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/3d/impossible.flf b/static/db/jave/3d/impossible.flf
similarity index 100%
rename from db/jave/3d/impossible.flf
rename to static/db/jave/3d/impossible.flf
diff --git a/static/db/jave/3d/impossible.svg b/static/db/jave/3d/impossible.svg
new file mode 100644
index 0000000..1837955
--- /dev/null
+++ b/static/db/jave/3d/impossible.svg
@@ -0,0 +1,130 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="110.880005" height="126.72" 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="110.880005" height="126.72"></rect>
+  <g>
+    <line x1="47.52" y1="10.56" x2="52.800003" y2="10.56" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="5.28" y2="95.04" class="solid"></line>
+    <line x1="5.28" y1="95.04" x2="0" y2="105.600006" class="solid"></line>
+    <line x1="0" y1="105.600006" x2="5.28" y2="116.16" class="solid"></line>
+    <line x1="5.28" y1="116.16" x2="36.960003" y2="116.16" class="solid"></line>
+    <line x1="58.08" y1="10.56" x2="15.84" y2="95.04" class="solid"></line>
+    <line x1="58.08" y1="10.56" x2="100.32001" y2="95.04" class="solid"></line>
+    <line x1="58.08" y1="31.68" x2="31.68" y2="84.48" class="solid"></line>
+    <line x1="58.08" y1="31.68" x2="95.04" y2="105.600006" class="solid"></line>
+    <line x1="52.800003" y1="42.24" x2="63.36" y2="63.36" class="solid"></line>
+    <line x1="36.960003" y1="73.920006" x2="58.08" y2="73.920006" class="solid"></line>
+    <line x1="63.36" y1="63.36" x2="58.08" y2="73.920006" class="solid"></line>
+    <line x1="73.920006" y1="63.36" x2="63.36" y2="84.48" class="solid"></line>
+    <line x1="31.68" y1="84.48" x2="63.36" y2="84.48" class="solid"></line>
+    <line x1="79.200005" y1="73.920006" x2="68.64" y2="95.04" class="solid"></line>
+    <line x1="15.84" y1="95.04" x2="68.64" y2="95.04" class="solid"></line>
+    <line x1="73.920006" y1="84.48" x2="84.48" y2="105.600006" class="solid"></line>
+    <line x1="15.84" y1="95.04" x2="10.56" y2="105.600006" class="solid"></line>
+    <line x1="26.400002" y1="95.04" x2="21.12" y2="105.600006" class="solid"></line>
+    <line x1="21.12" y1="105.600006" x2="31.68" y2="105.600006" class="solid"></line>
+    <line x1="68.64" y1="105.600006" x2="84.48" y2="105.600006" class="solid"></line>
+    <line x1="95.04" y1="105.600006" x2="105.600006" y2="105.600006" class="solid"></line>
+    <line x1="100.32001" y1="95.04" x2="105.600006" y2="105.600006" class="solid"></line>
+    <line x1="10.56" y1="105.600006" x2="15.84" y2="116.16" class="solid"></line>
+    <line x1="31.68" y1="105.600006" x2="36.960003" y2="116.16" class="solid"></line>
+    <line x1="68.64" y1="105.600006" x2="63.36" y2="116.16" class="solid"></line>
+    <line x1="63.36" y1="116.16" x2="100.32001" y2="116.16" class="solid"></line>
+    <line x1="95.04" y1="105.600006" x2="89.76" y2="116.16" class="solid"></line>
+    <line x1="105.600006" y1="105.600006" x2="100.32001" y2="116.16" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/3d/sub-zero.flf b/static/db/jave/3d/sub-zero.flf
similarity index 100%
rename from db/jave/3d/sub-zero.flf
rename to static/db/jave/3d/sub-zero.flf
diff --git a/static/db/jave/3d/sub-zero.svg b/static/db/jave/3d/sub-zero.svg
new file mode 100644
index 0000000..afbc2c8
--- /dev/null
+++ b/static/db/jave/3d/sub-zero.svg
@@ -0,0 +1,118 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="63.36" 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="58.08" height="63.36"></rect>
+  <line x1="21.12" y1="21.12" x2="31.68" y2="21.12" class="solid"></line>
+  <g>
+    <line x1="5.28" y1="10.56" x2="36.960003" y2="10.56" class="solid"></line>
+    <line x1="5.28" y1="10.56" x2="0" y2="21.12" class="solid"></line>
+    <line x1="5.28" y1="10.56" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="36.960003" y1="10.56" x2="52.800003" y2="42.24" class="solid"></line>
+    <line x1="0" y1="21.12" x2="15.84" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="52.800003" x2="26.400002" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="31.68" x2="36.960003" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="31.68" x2="36.960003" y2="52.800003" class="solid"></line>
+    <line x1="36.960003" y1="31.68" x2="42.24" y2="42.24" class="solid"></line>
+    <line x1="42.24" y1="42.24" x2="52.800003" y2="42.24" class="solid"></line>
+    <line x1="31.68" y1="42.24" x2="26.400002" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="42.24" x2="36.960003" y2="52.800003" class="solid"></line>
+    <line x1="36.960003" y1="52.800003" x2="47.52" y2="52.800003" class="solid"></line>
+    <line x1="52.800003" y1="42.24" x2="47.52" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/3d/swampland.flf b/static/db/jave/3d/swampland.flf
similarity index 100%
rename from db/jave/3d/swampland.flf
rename to static/db/jave/3d/swampland.flf
diff --git a/static/db/jave/3d/swampland.svg b/static/db/jave/3d/swampland.svg
new file mode 100644
index 0000000..7bee33d
--- /dev/null
+++ b/static/db/jave/3d/swampland.svg
@@ -0,0 +1,128 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="84.48" 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="79.200005" height="84.48"></rect>
+  <text x="6.6000004" y="29.04" >:</text>
+  <text x="27.720001" y="60.72" >.</text>
+  <g>
+    <line x1="5.28" y1="10.56" x2="47.52" y2="10.56" class="solid"></line>
+    <line x1="5.28" y1="10.56" x2="0" y2="21.12" class="solid"></line>
+    <line x1="0" y1="21.12" x2="42.24" y2="21.12" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="42.24" y2="21.12" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="73.920006" y2="63.36" class="solid"></line>
+    <line x1="0" y1="21.12" x2="26.400002" y2="73.920006" class="solid"></line>
+    <line x1="13.200001" y1="21.12" x2="13.200001" y2="42.24" class="broken"></line>
+    <line x1="18.480001" y1="21.12" x2="18.480001" y2="52.800003" class="broken"></line>
+    <line x1="42.24" y1="21.12" x2="68.64" y2="73.920006" class="solid"></line>
+    <line x1="31.68" y1="52.800003" x2="42.24" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="52.800003" x2="42.24" y2="73.920006" class="solid"></line>
+    <line x1="42.24" y1="52.800003" x2="52.800003" y2="73.920006" class="solid"></line>
+    <line x1="26.400002" y1="73.920006" x2="42.24" y2="73.920006" class="solid"></line>
+    <line x1="47.52" y1="63.36" x2="42.24" y2="73.920006" class="solid"></line>
+    <line x1="52.800003" y1="73.920006" x2="68.64" y2="73.920006" class="solid"></line>
+    <line x1="73.920006" y1="63.36" x2="68.64" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="31.68" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <path d="M 31.68,31.68 A 10.56,10.56 0,0,1 31.68,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 23.76,31.68 A 7.92,7.92 0,0,0 23.76,42.24" class="nofill"></path>
+    <line x1="23.76" y1="42.24" x2="23.76" y2="63.36" class="broken"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/braced.flf b/static/db/jave/block/braced.flf
similarity index 100%
rename from db/jave/block/braced.flf
rename to static/db/jave/block/braced.flf
diff --git a/static/db/jave/block/braced.svg b/static/db/jave/block/braced.svg
new file mode 100644
index 0000000..3aff9ef
--- /dev/null
+++ b/static/db/jave/block/braced.svg
@@ -0,0 +1,117 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="52.800003" 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="47.52" height="52.800003"></rect>
+  <text x="17.16" y="18.480001" >{}</text>
+  <text x="1.32" y="39.600002" >`</text>
+  <text x="38.280003" y="39.600002" >&#39;</text>
+  <g>
+    <path d="M 15.84,5.28 A 5.28,5.28 0,0,0 11.88,7.92" class="nofill"></path>
+    <line x1="11.88" y1="7.92" x2="0" y2="31.68" class="solid"></line>
+    <line x1="15.84" y1="5.28" x2="26.400002" y2="5.28" class="solid"></line>
+    <path d="M 26.400002,5.28 A 5.28,5.28 0,0,1 30.36,7.92" class="nofill"></path>
+    <line x1="30.36" y1="7.92" x2="42.24" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="21.12" x2="14.52" y2="34.32" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="27.720001" y2="34.32" class="solid"></line>
+    <path d="M 27.720001,34.32 A 5.28,5.28 0,0,0 31.68,36.960003" class="nofill"></path>
+    <line x1="31.68" y1="36.960003" x2="36.960003" y2="36.960003" class="solid"></line>
+    <line x1="5.28" y1="36.960003" x2="10.56" y2="36.960003" class="solid"></line>
+    <path d="M 14.52,34.32 A 5.28,5.28 0,0,1 10.56,36.960003" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/block/crazy.flf b/static/db/jave/block/crazy.flf
similarity index 100%
rename from db/jave/block/crazy.flf
rename to static/db/jave/block/crazy.flf
diff --git a/static/db/jave/block/crazy.svg b/static/db/jave/block/crazy.svg
new file mode 100644
index 0000000..ab3ff1f
--- /dev/null
+++ b/static/db/jave/block/crazy.svg
@@ -0,0 +1,135 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="147.84001" 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="58.08" height="147.84001"></rect>
+  <line x1="21.12" y1="63.36" x2="31.68" y2="63.36" class="solid"></line>
+  <text x="6.6000004" y="71.28001" >.</text>
+  <line x1="13.200001" y1="63.36" x2="13.200001" y2="84.48" class="broken"></line>
+  <text x="33" y="71.28001" >&#39;.</text>
+  <line x1="5.28" y1="73.920006" x2="0" y2="84.48" class="solid"></line>
+  <text x="1.32" y="92.4" >`&quot;</text>
+  <text x="11.88" y="102.96001" >&#39;</text>
+  <text x="22.44" y="102.96001" >&#39;&#39;</text>
+  <text x="17.16" y="124.08" >.</text>
+  <line x1="21.12" y1="126.72" x2="26.400002" y2="126.72" class="solid"></line>
+  <text x="27.720001" y="124.08" >,</text>
+  <line x1="31.68" y1="116.16" x2="36.960003" y2="126.72" class="solid"></line>
+  <text x="22.44" y="134.64" >&#39;</text>
+  <text x="38.280003" y="134.64" >`&quot;</text>
+  <g>
+    <line x1="15.84" y1="68.64" x2="26.400002" y2="68.64" class="solid"></line>
+    <path d="M 26.400002,68.64 A 5.28,5.28 0,0,1 30.36,71.28001" class="nofill"></path>
+    <line x1="30.36" y1="71.28001" x2="34.32" y2="79.200005" class="solid"></line>
+    <line x1="34.32" y1="79.200005" x2="34.32" y2="116.16" class="solid"></line>
+  </g>
+  <g>
+    <line x1="44.88" y1="73.920006" x2="44.88" y2="118.8" class="solid"></line>
+    <line x1="44.88" y1="116.16" x2="52.800003" y2="116.16" class="solid"></line>
+    <line x1="52.800003" y1="116.16" x2="47.52" y2="126.72" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="95.04" x2="26.400002" y2="95.04" class="solid"></line>
+    <path d="M 15.84,95.04 A 21.12,21.12 0,0,0 5.28,105.600006" class="nofill"></path>
+    <path d="M 26.400002,95.04 A 21.12,21.12 0,0,0 15.84,105.600006" class="nofill"></path>
+    <line x1="5.28" y1="105.600006" x2="0" y2="116.16" class="solid"></line>
+    <line x1="15.84" y1="105.600006" x2="10.56" y2="116.16" class="solid"></line>
+    <line x1="0" y1="116.16" x2="6.6000004" y2="129.36" class="solid"></line>
+    <line x1="10.56" y1="116.16" x2="15.84" y2="126.72" class="solid"></line>
+    <path d="M 6.6000004,129.36 A 5.28,5.28 0,0,0 10.56,132" class="nofill"></path>
+    <line x1="10.56" y1="132" x2="21.12" y2="132" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/ghoulish.flf b/static/db/jave/block/ghoulish.flf
similarity index 100%
rename from db/jave/block/ghoulish.flf
rename to static/db/jave/block/ghoulish.flf
diff --git a/static/db/jave/block/ghoulish.svg b/static/db/jave/block/ghoulish.svg
new file mode 100644
index 0000000..6c3a8bd
--- /dev/null
+++ b/static/db/jave/block/ghoulish.svg
@@ -0,0 +1,130 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="73.920006" 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="52.800003" height="73.920006"></rect>
+  <line x1="21.12" y1="0" x2="15.84" y2="10.56" class="solid"></line>
+  <text x="22.44" y="7.92" >`</text>
+  <text x="11.88" y="18.480001" >&#39;</text>
+  <line x1="21.12" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+  <text x="17.16" y="29.04" >&#39;</text>
+  <line x1="21.12" y1="26.400002" x2="26.400002" y2="26.400002" class="solid"></line>
+  <text x="27.720001" y="29.04" >&#39;</text>
+  <text x="17.16" y="50.160004" >,&#39;</text>
+  <line x1="15.84" y1="52.800003" x2="10.56" y2="63.36" class="solid"></line>
+  <path d="M 36.960003,52.800003 A 10.56,10.56 0,0,1 36.960003,63.36" class="nofill"></path>
+  <g>
+    <line x1="26.400002" y1="5.28" x2="31.68" y2="5.28" class="solid"></line>
+    <path d="M 31.68,5.28 A 5.28,5.28 0,0,1 35.640003,7.92" class="nofill"></path>
+    <line x1="35.640003" y1="7.92" x2="42.24" y2="21.12" class="solid"></line>
+    <path d="M 42.24,21.12 A 10.56,10.56 0,0,0 42.24,31.68" class="nofill"></path>
+    <path d="M 42.24,31.68 A 10.56,10.56 0,0,1 42.24,42.24" class="nofill"></path>
+    <line x1="42.24" y1="42.24" x2="47.52" y2="52.800003" class="solid"></line>
+    <line x1="47.52" y1="52.800003" x2="42.24" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 10.56,15.84 A 5.28,5.28 0,0,0 6.6000004,18.480001" class="nofill"></path>
+    <line x1="6.6000004" y1="18.480001" x2="5.28" y2="21.12" class="solid"></line>
+    <path d="M 5.28,21.12 A 10.56,10.56 0,0,0 5.28,31.68" class="nofill"></path>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,1 5.28,42.24" class="nofill"></path>
+    <path d="M 5.28,42.24 A 10.56,10.56 0,0,0 5.28,52.800003" class="nofill"></path>
+    <path d="M 5.28,52.800003 A 10.56,10.56 0,0,1 5.28,63.36" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="26.400002" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <path d="M 31.68,42.24 A 10.56,10.56 0,0,1 31.68,52.800003" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/block/glenyn.flf b/static/db/jave/block/glenyn.flf
similarity index 100%
rename from db/jave/block/glenyn.flf
rename to static/db/jave/block/glenyn.flf
diff --git a/static/db/jave/block/glenyn.svg b/static/db/jave/block/glenyn.svg
new file mode 100644
index 0000000..c72fca6
--- /dev/null
+++ b/static/db/jave/block/glenyn.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="52.800003" 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="31.68" height="52.800003"></rect>
+  <text x="11.88" y="29.04" >.</text>
+  <g>
+    <line x1="0" y1="10.56" x2="15.84" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="10.56" x2="2.64" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="26.400002" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="15.84" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="26.400002" y1="31.68" x2="21.12" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/jacky.flf b/static/db/jave/block/jacky.flf
similarity index 100%
rename from db/jave/block/jacky.flf
rename to static/db/jave/block/jacky.flf
diff --git a/static/db/jave/block/jacky.svg b/static/db/jave/block/jacky.svg
new file mode 100644
index 0000000..308c1fd
--- /dev/null
+++ b/static/db/jave/block/jacky.svg
@@ -0,0 +1,127 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="84.48" 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="58.08" height="84.48"></rect>
+  <g>
+    <line x1="15.84" y1="10.56" x2="36.960003" y2="10.56" class="solid"></line>
+    <path d="M 15.84,10.56 A 10.56,10.56 0,0,0 15.84,21.12" class="nofill"></path>
+    <path d="M 36.960003,10.56 A 10.56,10.56 0,0,1 36.960003,21.12" class="nofill"></path>
+    <line x1="15.84" y1="21.12" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="36.960003" y1="21.12" x2="42.24" y2="31.68" class="solid"></line>
+    <path d="M 10.56,31.68 A 10.56,10.56 0,0,0 10.56,42.24" class="nofill"></path>
+    <path d="M 42.24,31.68 A 10.56,10.56 0,0,1 42.24,42.24" class="nofill"></path>
+    <path d="M 10.56,42.24 A 10.56,10.56 0,0,1 10.56,52.800003" class="nofill"></path>
+    <path d="M 42.24,42.24 A 10.56,10.56 0,0,0 42.24,52.800003" class="nofill"></path>
+    <line x1="10.56" y1="52.800003" x2="0" y2="73.920006" class="solid"></line>
+    <line x1="42.24" y1="52.800003" x2="52.800003" y2="73.920006" class="solid"></line>
+    <line x1="0" y1="73.920006" x2="15.84" y2="73.920006" class="solid"></line>
+    <line x1="36.960003" y1="73.920006" x2="52.800003" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="21.12" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="31.68" y2="31.68" class="solid"></line>
+    <path d="M 21.12,31.68 A 10.56,10.56 0,0,0 21.12,42.24" class="nofill"></path>
+    <line x1="21.12" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <path d="M 31.68,31.68 A 10.56,10.56 0,0,1 31.68,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="26.400002" y1="52.800003" x2="21.12" y2="63.36" class="solid"></line>
+    <line x1="26.400002" y1="52.800003" x2="31.68" y2="63.36" class="solid"></line>
+    <path d="M 21.12,63.36 A 10.56,10.56 0,0,0 21.12,73.920006" class="nofill"></path>
+    <path d="M 31.68,63.36 A 10.56,10.56 0,0,1 31.68,73.920006" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/block/lineblocks.flf b/static/db/jave/block/lineblocks.flf
similarity index 100%
rename from db/jave/block/lineblocks.flf
rename to static/db/jave/block/lineblocks.flf
diff --git a/static/db/jave/block/lineblocks.svg b/static/db/jave/block/lineblocks.svg
new file mode 100644
index 0000000..448a05e
--- /dev/null
+++ b/static/db/jave/block/lineblocks.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="52.800003" 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="47.52" height="52.800003"></rect>
+  <g>
+    <line x1="2.64" y1="10.56" x2="39.600002" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="10.56" x2="2.64" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="10.56" x2="13.200001" y2="42.24" class="solid"></line>
+    <line x1="29.04" y1="10.56" x2="29.04" y2="42.24" class="solid"></line>
+    <line x1="39.600002" y1="10.56" x2="39.600002" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="31.68" x2="29.04" y2="31.68" class="solid"></line>
+    <line x1="2.64" y1="42.24" x2="13.200001" y2="42.24" class="solid"></line>
+    <line x1="29.04" y1="42.24" x2="39.600002" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/merlin1.flf b/static/db/jave/block/merlin1.flf
similarity index 100%
rename from db/jave/block/merlin1.flf
rename to static/db/jave/block/merlin1.flf
diff --git a/static/db/jave/block/merlin1.svg b/static/db/jave/block/merlin1.svg
new file mode 100644
index 0000000..30232f0
--- /dev/null
+++ b/static/db/jave/block/merlin1.svg
@@ -0,0 +1,120 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="84.48" 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="79.200005" height="84.48"></rect>
+  <text x="22.44" y="39.600002" >&#39;</text>
+  <line x1="21.12" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+  <text x="43.56" y="50.160004" >&#39;</text>
+  <line x1="47.52" y1="52.800003" x2="52.800003" y2="63.36" class="solid"></line>
+  <text x="33" y="18.480001" ></text>
+  <g>
+    <line x1="31.68" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="68.64" y2="63.36" class="solid"></line>
+    <path d="M 5.28,63.36 A 10.56,10.56 0,0,0 5.28,73.920006" class="nofill"></path>
+    <line x1="31.68" y1="52.800003" x2="42.24" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="52.800003" x2="21.12" y2="73.920006" class="solid"></line>
+    <line x1="42.24" y1="52.800003" x2="52.800003" y2="73.920006" class="solid"></line>
+    <line x1="5.28" y1="73.920006" x2="21.12" y2="73.920006" class="solid"></line>
+    <line x1="52.800003" y1="73.920006" x2="68.64" y2="73.920006" class="solid"></line>
+    <path d="M 68.64,63.36 A 10.56,10.56 0,0,1 68.64,73.920006" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="36.960003" y1="31.68" x2="31.68" y2="42.24" class="solid"></line>
+    <line x1="36.960003" y1="31.68" x2="42.24" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/merlin2.flf b/static/db/jave/block/merlin2.flf
similarity index 100%
rename from db/jave/block/merlin2.flf
rename to static/db/jave/block/merlin2.flf
diff --git a/static/db/jave/block/merlin2.svg b/static/db/jave/block/merlin2.svg
new file mode 100644
index 0000000..63bf86c
--- /dev/null
+++ b/static/db/jave/block/merlin2.svg
@@ -0,0 +1,132 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="84.48" 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="52.800003" height="84.48"></rect>
+  <text x="6.6000004" y="50.160004" >:.</text>
+  <g>
+    <line x1="21.12" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="31.68" y2="21.12" class="solid"></line>
+    <line x1="31.68" y1="21.12" x2="42.24" y2="21.12" class="solid"></line>
+    <line x1="5.28" y1="21.12" x2="15.84" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="15.84" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="26.400002" y2="21.12" class="solid"></line>
+    <path d="M 5.28,21.12 A 10.56,10.56 0,0,0 5.28,31.68" class="nofill"></path>
+    <line x1="5.28" y1="31.68" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="7.92" y2="36.960003" class="solid"></line>
+    <line x1="7.92" y1="36.960003" x2="7.92" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="42.24" y2="31.68" class="solid"></line>
+    <path d="M 42.24,21.12 A 10.56,10.56 0,0,1 42.24,31.68" class="nofill"></path>
+    <line x1="31.68" y1="31.68" x2="42.24" y2="52.800003" class="solid"></line>
+    <line x1="36.960003" y1="31.68" x2="47.52" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="52.800003" x2="31.68" y2="73.920006" class="solid"></line>
+    <line x1="47.52" y1="52.800003" x2="36.960003" y2="73.920006" class="solid"></line>
+    <line x1="26.400002" y1="63.36" x2="31.68" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="52.800003" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="31.68" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="5.28" y1="42.24" x2="0" y2="52.800003" class="solid"></line>
+    <line x1="0" y1="52.800003" x2="10.56" y2="73.920006" class="solid"></line>
+    <line x1="15.84" y1="63.36" x2="21.12" y2="63.36" class="solid"></line>
+    <line x1="15.84" y1="63.36" x2="10.56" y2="73.920006" class="solid"></line>
+    <line x1="21.12" y1="63.36" x2="15.84" y2="73.920006" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/modular.flf b/static/db/jave/block/modular.flf
similarity index 100%
rename from db/jave/block/modular.flf
rename to static/db/jave/block/modular.flf
diff --git a/static/db/jave/block/modular.svg b/static/db/jave/block/modular.svg
new file mode 100644
index 0000000..ee35653
--- /dev/null
+++ b/static/db/jave/block/modular.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="84.48" 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="52.800003" height="84.48"></rect>
+  <rect x="18.480001" y="21.12" width="10.559999" height="10.559999" class="solid nofill" rx="0"></rect>
+  <g>
+    <line x1="2.64" y1="10.56" x2="44.88" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="10.56" x2="2.64" y2="73.920006" class="solid"></line>
+    <line x1="44.88" y1="10.56" x2="44.88" y2="73.920006" class="solid"></line>
+    <line x1="2.64" y1="73.920006" x2="18.480001" y2="73.920006" class="solid"></line>
+    <line x1="18.480001" y1="63.36" x2="29.04" y2="63.36" class="solid"></line>
+    <line x1="18.480001" y1="63.36" x2="18.480001" y2="73.920006" class="solid"></line>
+    <line x1="29.04" y1="63.36" x2="29.04" y2="73.920006" class="solid"></line>
+    <line x1="29.04" y1="73.920006" x2="44.88" y2="73.920006" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/red_phoenix.flf b/static/db/jave/block/red_phoenix.flf
similarity index 100%
rename from db/jave/block/red_phoenix.flf
rename to static/db/jave/block/red_phoenix.flf
diff --git a/static/db/jave/block/red_phoenix.svg b/static/db/jave/block/red_phoenix.svg
new file mode 100644
index 0000000..85f94f1
--- /dev/null
+++ b/static/db/jave/block/red_phoenix.svg
@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="73.920006" 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="63.36" height="73.920006"></rect>
+  <g>
+    <line x1="15.84" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="0" y2="42.24" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="58.08" y2="42.24" class="solid"></line>
+    <line x1="0" y1="42.24" x2="5.28" y2="52.800003" class="solid"></line>
+    <line x1="58.08" y1="42.24" x2="47.52" y2="63.36" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="31.68" y2="21.12" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="36.960003" y2="31.68" class="solid"></line>
+    <line x1="31.68" y1="21.12" x2="36.960003" y2="31.68" class="solid"></line>
+    <line x1="29.04" y1="31.68" x2="29.04" y2="52.800003" class="solid"></line>
+    <line x1="5.28" y1="52.800003" x2="42.24" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="52.800003" x2="47.52" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/smallcaps.flf b/static/db/jave/block/smallcaps.flf
similarity index 100%
rename from db/jave/block/smallcaps.flf
rename to static/db/jave/block/smallcaps.flf
diff --git a/static/db/jave/block/smallcaps.svg b/static/db/jave/block/smallcaps.svg
new file mode 100644
index 0000000..74fad50
--- /dev/null
+++ b/static/db/jave/block/smallcaps.svg
@@ -0,0 +1,118 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="52.800003" 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="42.24" height="52.800003"></rect>
+  <path d="M 0,31.68 A 10.56,10.56 0,0,1 0,42.24" class="nofill"></path>
+  <path d="M 36.960003,31.68 A 10.56,10.56 0,0,0 36.960003,42.24" class="nofill"></path>
+  <g>
+    <line x1="15.84" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="31.68" y2="31.68" class="solid"></line>
+    <path d="M 15.84,21.12 A 10.56,10.56 0,0,0 15.84,31.68" class="nofill"></path>
+    <line x1="5.28" y1="42.24" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="31.68" x2="10.56" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 10.56,10.56 A 10.56,10.56 0,0,1 10.56,21.12" class="nofill"></path>
+    <line x1="10.56" y1="21.12" x2="5.28" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 21.12,21.12 A 10.56,10.56 0,0,1 21.12,31.68" class="nofill"></path>
+    <line x1="21.12" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/soft.flf b/static/db/jave/block/soft.flf
similarity index 100%
rename from db/jave/block/soft.flf
rename to static/db/jave/block/soft.flf
diff --git a/static/db/jave/block/soft.svg b/static/db/jave/block/soft.svg
new file mode 100644
index 0000000..41fc4e5
--- /dev/null
+++ b/static/db/jave/block/soft.svg
@@ -0,0 +1,124 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="73.920006" 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="52.800003" height="73.920006"></rect>
+  <text x="22.44" y="29.04" >O</text>
+  <text x="1.32" y="39.600002" >|</text>
+  <text x="43.56" y="39.600002" >|</text>
+  <g>
+    <path d="M 15.84,15.84 A 5.28,5.28 0,0,0 11.88,18.480001" class="nofill"></path>
+    <line x1="11.88" y1="18.480001" x2="5.28" y2="31.68" class="solid"></line>
+    <line x1="15.84" y1="15.84" x2="31.68" y2="15.84" class="solid"></line>
+    <path d="M 31.68,15.84 A 5.28,5.28 0,0,1 35.640003,18.480001" class="nofill"></path>
+    <line x1="35.640003" y1="18.480001" x2="42.24" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 21.12,36.960003 A 2.64,2.64 0,0,0 18.480001,39.600002" class="nofill"></path>
+    <line x1="18.480001" y1="39.600002" x2="18.480001" y2="55.440002" class="solid"></line>
+    <line x1="21.12" y1="36.960003" x2="26.400002" y2="36.960003" class="solid"></line>
+    <path d="M 26.400002,36.960003 A 2.64,2.64 0,0,1 29.04,39.600002" class="nofill"></path>
+    <line x1="29.04" y1="39.600002" x2="29.04" y2="55.440002" class="solid"></line>
+    <path d="M 29.04,55.440002 A 2.64,2.64 0,0,0 31.68,58.08" class="nofill"></path>
+    <line x1="31.68" y1="58.08" x2="42.24" y2="58.08" class="solid"></line>
+    <line x1="2.64" y1="42.24" x2="2.64" y2="55.440002" class="solid"></line>
+    <path d="M 2.64,55.440002 A 2.64,2.64 0,0,0 5.28,58.08" class="nofill"></path>
+    <line x1="5.28" y1="58.08" x2="15.84" y2="58.08" class="solid"></line>
+    <path d="M 18.480001,55.440002 A 2.64,2.64 0,0,1 15.84,58.08" class="nofill"></path>
+    <line x1="44.88" y1="42.24" x2="44.88" y2="55.440002" class="solid"></line>
+    <path d="M 44.88,55.440002 A 2.64,2.64 0,0,1 42.24,58.08" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/block/spliff.flf b/static/db/jave/block/spliff.flf
similarity index 100%
rename from db/jave/block/spliff.flf
rename to static/db/jave/block/spliff.flf
diff --git a/static/db/jave/block/spliff.svg b/static/db/jave/block/spliff.svg
new file mode 100644
index 0000000..3537961
--- /dev/null
+++ b/static/db/jave/block/spliff.svg
@@ -0,0 +1,114 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="52.800003" 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="42.24" height="52.800003"></rect>
+  <line x1="15.84" y1="21.12" x2="21.12" y2="21.12" class="solid"></line>
+  <g>
+    <line x1="5.28" y1="10.56" x2="31.68" y2="10.56" class="solid"></line>
+    <line x1="5.28" y1="10.56" x2="2.64" y2="15.84" class="solid"></line>
+    <line x1="2.64" y1="15.84" x2="2.64" y2="31.68" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="34.32" y2="15.84" class="solid"></line>
+    <line x1="34.32" y1="15.84" x2="34.32" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="0" y1="31.68" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="5.28" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <line x1="18.480001" y1="31.68" x2="18.480001" y2="42.24" class="solid"></line>
+    <line x1="36.960003" y1="31.68" x2="31.68" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/stforek.flf b/static/db/jave/block/stforek.flf
similarity index 100%
rename from db/jave/block/stforek.flf
rename to static/db/jave/block/stforek.flf
diff --git a/static/db/jave/block/stforek.svg b/static/db/jave/block/stforek.svg
new file mode 100644
index 0000000..de60584
--- /dev/null
+++ b/static/db/jave/block/stforek.svg
@@ -0,0 +1,116 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="52.800003" 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="36.960003" height="52.800003"></rect>
+  <text x="1.32" y="29.04" >|</text>
+  <text x="27.720001" y="29.04" >|</text>
+  <g>
+    <line x1="10.56" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="26.400002" y2="21.12" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="21.12" x2="13.200001" y2="26.400002" class="solid"></line>
+    <line x1="13.200001" y1="26.400002" x2="13.200001" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="21.12" x2="18.480001" y2="26.400002" class="solid"></line>
+    <line x1="18.480001" y1="26.400002" x2="18.480001" y2="42.24" class="solid"></line>
+    <line x1="18.480001" y1="42.24" x2="29.04" y2="42.24" class="solid"></line>
+    <line x1="29.04" y1="31.68" x2="29.04" y2="42.24" class="solid"></line>
+    <line x1="2.64" y1="31.68" x2="2.64" y2="42.24" class="solid"></line>
+    <line x1="2.64" y1="42.24" x2="13.200001" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/sweet.flf b/static/db/jave/block/sweet.flf
similarity index 100%
rename from db/jave/block/sweet.flf
rename to static/db/jave/block/sweet.flf
diff --git a/static/db/jave/block/sweet.svg b/static/db/jave/block/sweet.svg
new file mode 100644
index 0000000..ebaf1bb
--- /dev/null
+++ b/static/db/jave/block/sweet.svg
@@ -0,0 +1,138 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="126.72" 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="47.52" height="126.72"></rect>
+  <text x="17.16" y="39.600002" >.</text>
+  <line x1="21.12" y1="36.960003" x2="26.400002" y2="36.960003" class="solid"></line>
+  <text x="27.720001" y="39.600002" >,</text>
+  <path d="M 18.480001,42.24 A 7.92,7.92 0,0,1 18.480001,52.800003" class="nofill"></path>
+  <text x="27.720001" y="50.160004" >;</text>
+  <text x="17.16" y="60.72" >&#39;`</text>
+  <text x="22.44" y="71.28001" >&#39;</text>
+  <line x1="29.04" y1="63.36" x2="29.04" y2="84.48" class="solid"></line>
+  <text x="1.32" y="81.840004" >|</text>
+  <text x="1.32" y="92.4" >;</text>
+  <text x="27.720001" y="92.4" >;</text>
+  <text x="1.32" y="102.96001" >&#39;</text>
+  <text x="22.44" y="102.96001" >&#39;</text>
+  <text x="1.32" y="113.520004" >`.</text>
+  <line x1="10.56" y1="116.16" x2="21.12" y2="116.16" class="solid"></line>
+  <text x="22.44" y="113.520004" >.&#39;</text>
+  <line x1="31.68" y1="116.16" x2="36.960003" y2="116.16" class="solid"></line>
+  <text x="38.280003" y="113.520004" >.</text>
+  <g>
+    <path d="M 15.84,26.400002 A 5.28,5.28 0,0,0 11.88,29.04" class="nofill"></path>
+    <line x1="11.88" y1="29.04" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="26.400002" x2="31.68" y2="26.400002" class="solid"></line>
+    <path d="M 31.68,26.400002 A 5.28,5.28 0,0,1 35.640003,29.04" class="nofill"></path>
+    <line x1="35.640003" y1="29.04" x2="39.600002" y2="36.960003" class="solid"></line>
+    <line x1="39.600002" y1="36.960003" x2="39.600002" y2="105.600006" class="solid"></line>
+    <path d="M 5.28,42.24 A 10.56,10.56 0,0,0 5.28,52.800003" class="nofill"></path>
+    <line x1="5.28" y1="52.800003" x2="15.84" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 21.12,52.800003 A 21.12,21.12 0,0,0 10.56,63.36" class="nofill"></path>
+    <line x1="10.56" y1="63.36" x2="5.28" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 26.400002,63.36 A 21.12,21.12 0,0,0 15.84,73.920006" class="nofill"></path>
+    <line x1="15.84" y1="73.920006" x2="13.200001" y2="79.200005" class="solid"></line>
+    <line x1="13.200001" y1="79.200005" x2="13.200001" y2="97.68" class="solid"></line>
+    <path d="M 13.200001,97.68 A 2.64,2.64 0,0,0 15.84,100.32001" class="nofill"></path>
+    <line x1="15.84" y1="100.32001" x2="21.12" y2="100.32001" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/test1.flf b/static/db/jave/block/test1.flf
similarity index 100%
rename from db/jave/block/test1.flf
rename to static/db/jave/block/test1.flf
diff --git a/static/db/jave/block/test1.svg b/static/db/jave/block/test1.svg
new file mode 100644
index 0000000..a0c3d69
--- /dev/null
+++ b/static/db/jave/block/test1.svg
@@ -0,0 +1,112 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="52.800003" 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="63.36" height="52.800003"></rect>
+  <line x1="27.720001" y1="18.480001" x2="29.04" y2="15.84" class="solid end_marked_big_open_circle"></line>
+  <text x="27.720001" y="29.04" >%</text>
+  <text x="1.32" y="39.600002" >`BB&#39;</text>
+  <text x="38.280003" y="39.600002" >`BB&#39;</text>
+  <g>
+    <line x1="10.56" y1="10.56" x2="47.52" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="0" y2="31.68" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="58.08" y2="31.68" class="solid"></line>
+    <line x1="0" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="30.36" y1="18.480001" x2="36.960003" y2="31.68" class="solid"></line>
+    <line x1="36.960003" y1="31.68" x2="58.08" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/block/varsity.flf b/static/db/jave/block/varsity.flf
similarity index 100%
rename from db/jave/block/varsity.flf
rename to static/db/jave/block/varsity.flf
diff --git a/static/db/jave/block/varsity.svg b/static/db/jave/block/varsity.svg
new file mode 100644
index 0000000..b289b3e
--- /dev/null
+++ b/static/db/jave/block/varsity.svg
@@ -0,0 +1,118 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="73.920006" height="73.920006" 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="73.920006" height="73.920006"></rect>
+  <line x1="31.68" y1="31.68" x2="36.960003" y2="31.68" class="solid"></line>
+  <g>
+    <line x1="31.68" y1="10.56" x2="36.960003" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="36.960003" y1="10.56" x2="58.08" y2="52.800003" class="solid"></line>
+    <line x1="2.64" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="58.08" y1="52.800003" x2="66" y2="52.800003" class="solid"></line>
+    <line x1="2.64" y1="52.800003" x2="2.64" y2="63.36" class="solid"></line>
+    <line x1="2.64" y1="63.36" x2="29.04" y2="63.36" class="solid"></line>
+    <line x1="29.04" y1="52.800003" x2="29.04" y2="63.36" class="solid"></line>
+    <line x1="39.600002" y1="52.800003" x2="39.600002" y2="63.36" class="solid"></line>
+    <line x1="39.600002" y1="63.36" x2="66" y2="63.36" class="solid"></line>
+    <line x1="66" y1="52.800003" x2="66" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="42.24" x2="42.24" y2="42.24" class="solid"></line>
+    <line x1="26.400002" y1="42.24" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="42.24" x2="47.52" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/code/ICL-1900.flf b/static/db/jave/code/ICL-1900.flf
similarity index 100%
rename from db/jave/code/ICL-1900.flf
rename to static/db/jave/code/ICL-1900.flf
diff --git a/db/jave/code/binary.flf b/static/db/jave/code/binary.flf
similarity index 100%
rename from db/jave/code/binary.flf
rename to static/db/jave/code/binary.flf
diff --git a/db/jave/code/dosrebel.flf b/static/db/jave/code/dosrebel.flf
similarity index 100%
rename from db/jave/code/dosrebel.flf
rename to static/db/jave/code/dosrebel.flf
diff --git a/db/jave/code/mnemonic.flf b/static/db/jave/code/mnemonic.flf
similarity index 100%
rename from db/jave/code/mnemonic.flf
rename to static/db/jave/code/mnemonic.flf
diff --git a/db/jave/code/morse.flf b/static/db/jave/code/morse.flf
similarity index 100%
rename from db/jave/code/morse.flf
rename to static/db/jave/code/morse.flf
diff --git a/db/jave/code/morse2.flf b/static/db/jave/code/morse2.flf
similarity index 100%
rename from db/jave/code/morse2.flf
rename to static/db/jave/code/morse2.flf
diff --git a/db/jave/dingbat/DANC4.flf b/static/db/jave/dingbat/DANC4.flf
similarity index 100%
rename from db/jave/dingbat/DANC4.flf
rename to static/db/jave/dingbat/DANC4.flf
diff --git a/db/jave/dingbat/hieroglyphs.flf b/static/db/jave/dingbat/hieroglyphs.flf
similarity index 100%
rename from db/jave/dingbat/hieroglyphs.flf
rename to static/db/jave/dingbat/hieroglyphs.flf
diff --git a/db/jave/directions/flipped.flf b/static/db/jave/directions/flipped.flf
similarity index 100%
rename from db/jave/directions/flipped.flf
rename to static/db/jave/directions/flipped.flf
diff --git a/db/jave/directions/horizontalleft.flf b/static/db/jave/directions/horizontalleft.flf
similarity index 100%
rename from db/jave/directions/horizontalleft.flf
rename to static/db/jave/directions/horizontalleft.flf
diff --git a/db/jave/directions/horizontalright.flf b/static/db/jave/directions/horizontalright.flf
similarity index 100%
rename from db/jave/directions/horizontalright.flf
rename to static/db/jave/directions/horizontalright.flf
diff --git a/db/jave/directions/knob.flf b/static/db/jave/directions/knob.flf
similarity index 100%
rename from db/jave/directions/knob.flf
rename to static/db/jave/directions/knob.flf
diff --git a/db/jave/directions/rotated.flf b/static/db/jave/directions/rotated.flf
similarity index 100%
rename from db/jave/directions/rotated.flf
rename to static/db/jave/directions/rotated.flf
diff --git a/db/jave/effect/dancingfont.flf b/static/db/jave/effect/dancingfont.flf
similarity index 100%
rename from db/jave/effect/dancingfont.flf
rename to static/db/jave/effect/dancingfont.flf
diff --git a/static/db/jave/effect/dancingfont.svg b/static/db/jave/effect/dancingfont.svg
new file mode 100644
index 0000000..572f960
--- /dev/null
+++ b/static/db/jave/effect/dancingfont.svg
@@ -0,0 +1,127 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="84.48" 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="58.08" height="84.48"></rect>
+  <text x="1.32" y="18.480001" >U</text>
+  <text x="22.44" y="18.480001" >&quot;</text>
+  <text x="43.56" y="18.480001" >u</text>
+  <line x1="21.12" y1="31.68" x2="26.400002" y2="31.68" class="solid"></line>
+  <text x="38.280003" y="60.72" >&gt;</text>
+  <polygon points="42.24,55.440002 47.52,58.08 42.24,60.72" class="filled"></polygon>
+  <g>
+    <line x1="21.12" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="0" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="47.52" y2="52.800003" class="solid"></line>
+    <line x1="5.28" y1="21.12" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="42.24" y1="21.12" x2="36.960003" y2="31.68" class="solid"></line>
+    <line x1="0" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="5.28" y1="52.800003" x2="10.56" y2="63.36" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="42.24" x2="36.960003" y2="52.800003" class="solid"></line>
+    <line x1="36.960003" y1="52.800003" x2="47.52" y2="52.800003" class="solid"></line>
+    <line x1="10.56" y1="52.800003" x2="15.84" y2="63.36" class="solid"></line>
+    <path d="M 5.28,63.36 A 10.56,10.56 0,0,0 5.28,73.920006" class="nofill"></path>
+    <line x1="5.28" y1="73.920006" x2="15.84" y2="73.920006" class="solid"></line>
+    <path d="M 15.84,63.36 A 10.56,10.56 0,0,1 15.84,73.920006" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 36.960003,63.36 A 10.56,10.56 0,0,0 36.960003,73.920006" class="nofill"></path>
+    <line x1="36.960003" y1="73.920006" x2="47.52" y2="73.920006" class="solid"></line>
+    <path d="M 47.52,63.36 A 10.56,10.56 0,0,1 47.52,73.920006" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/effect/fire_font-k.flf b/static/db/jave/effect/fire_font-k.flf
similarity index 100%
rename from db/jave/effect/fire_font-k.flf
rename to static/db/jave/effect/fire_font-k.flf
diff --git a/static/db/jave/effect/fire_font-k.svg b/static/db/jave/effect/fire_font-k.svg
new file mode 100644
index 0000000..26f058d
--- /dev/null
+++ b/static/db/jave/effect/fire_font-k.svg
@@ -0,0 +1,138 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="95.04" 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="52.800003" height="95.04"></rect>
+  <path d="M 31.68,42.24 A 10.56,10.56 0,0,1 31.68,52.800003" class="nofill"></path>
+  <g>
+    <path d="M 21.12,10.56 A 10.56,10.56 0,0,0 21.12,21.12" class="nofill"></path>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+    <path d="M 21.12,31.68 A 10.56,10.56 0,0,0 21.12,42.24" class="nofill"></path>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="42.24" class="solid"></line>
+    <path d="M 26.400002,31.68 A 10.56,10.56 0,0,1 26.400002,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 15.84,21.12 A 10.56,10.56 0,0,1 15.84,31.68" class="nofill"></path>
+    <path d="M 15.84,31.68 A 10.56,10.56 0,0,0 15.84,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,0 5.28,42.24" class="nofill"></path>
+    <path d="M 5.28,42.24 A 10.56,10.56 0,0,1 5.28,52.800003" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 10.56,31.68 A 10.56,10.56 0,0,0 10.56,42.24" class="nofill"></path>
+    <line x1="10.56" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+    <path d="M 10.56,52.800003 A 10.56,10.56 0,0,0 10.56,63.36" class="nofill"></path>
+    <line x1="10.56" y1="63.36" x2="15.84" y2="63.36" class="solid"></line>
+    <path d="M 15.84,52.800003 A 10.56,10.56 0,0,1 15.84,63.36" class="nofill"></path>
+    <line x1="15.84" y1="63.36" x2="5.28" y2="84.48" class="solid"></line>
+    <line x1="5.28" y1="84.48" x2="15.84" y2="84.48" class="solid"></line>
+    <line x1="21.12" y1="52.800003" x2="26.400002" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="63.36" x2="31.68" y2="63.36" class="solid"></line>
+    <line x1="26.400002" y1="52.800003" x2="42.24" y2="84.48" class="solid"></line>
+    <line x1="21.12" y1="73.920006" x2="26.400002" y2="73.920006" class="solid"></line>
+    <line x1="21.12" y1="73.920006" x2="15.84" y2="84.48" class="solid"></line>
+    <line x1="26.400002" y1="73.920006" x2="31.68" y2="84.48" class="solid"></line>
+    <line x1="31.68" y1="84.48" x2="42.24" y2="84.48" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 36.960003,31.68 A 10.56,10.56 0,0,0 36.960003,42.24" class="nofill"></path>
+    <line x1="36.960003" y1="42.24" x2="42.24" y2="52.800003" class="solid"></line>
+    <path d="M 36.960003,52.800003 A 10.56,10.56 0,0,0 36.960003,63.36" class="nofill"></path>
+    <line x1="36.960003" y1="63.36" x2="42.24" y2="63.36" class="solid"></line>
+    <path d="M 42.24,52.800003 A 10.56,10.56 0,0,1 42.24,63.36" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/effect/fire_font-s.flf b/static/db/jave/effect/fire_font-s.flf
similarity index 100%
rename from db/jave/effect/fire_font-s.flf
rename to static/db/jave/effect/fire_font-s.flf
diff --git a/static/db/jave/effect/fire_font-s.svg b/static/db/jave/effect/fire_font-s.svg
new file mode 100644
index 0000000..26f058d
--- /dev/null
+++ b/static/db/jave/effect/fire_font-s.svg
@@ -0,0 +1,138 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="95.04" 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="52.800003" height="95.04"></rect>
+  <path d="M 31.68,42.24 A 10.56,10.56 0,0,1 31.68,52.800003" class="nofill"></path>
+  <g>
+    <path d="M 21.12,10.56 A 10.56,10.56 0,0,0 21.12,21.12" class="nofill"></path>
+    <line x1="21.12" y1="21.12" x2="26.400002" y2="31.68" class="solid"></line>
+    <path d="M 21.12,31.68 A 10.56,10.56 0,0,0 21.12,42.24" class="nofill"></path>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="42.24" class="solid"></line>
+    <path d="M 26.400002,31.68 A 10.56,10.56 0,0,1 26.400002,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 15.84,21.12 A 10.56,10.56 0,0,1 15.84,31.68" class="nofill"></path>
+    <path d="M 15.84,31.68 A 10.56,10.56 0,0,0 15.84,42.24" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,0 5.28,42.24" class="nofill"></path>
+    <path d="M 5.28,42.24 A 10.56,10.56 0,0,1 5.28,52.800003" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 10.56,31.68 A 10.56,10.56 0,0,0 10.56,42.24" class="nofill"></path>
+    <line x1="10.56" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+    <path d="M 10.56,52.800003 A 10.56,10.56 0,0,0 10.56,63.36" class="nofill"></path>
+    <line x1="10.56" y1="63.36" x2="15.84" y2="63.36" class="solid"></line>
+    <path d="M 15.84,52.800003 A 10.56,10.56 0,0,1 15.84,63.36" class="nofill"></path>
+    <line x1="15.84" y1="63.36" x2="5.28" y2="84.48" class="solid"></line>
+    <line x1="5.28" y1="84.48" x2="15.84" y2="84.48" class="solid"></line>
+    <line x1="21.12" y1="52.800003" x2="26.400002" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="63.36" x2="31.68" y2="63.36" class="solid"></line>
+    <line x1="26.400002" y1="52.800003" x2="42.24" y2="84.48" class="solid"></line>
+    <line x1="21.12" y1="73.920006" x2="26.400002" y2="73.920006" class="solid"></line>
+    <line x1="21.12" y1="73.920006" x2="15.84" y2="84.48" class="solid"></line>
+    <line x1="26.400002" y1="73.920006" x2="31.68" y2="84.48" class="solid"></line>
+    <line x1="31.68" y1="84.48" x2="42.24" y2="84.48" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 36.960003,31.68 A 10.56,10.56 0,0,0 36.960003,42.24" class="nofill"></path>
+    <line x1="36.960003" y1="42.24" x2="42.24" y2="52.800003" class="solid"></line>
+    <path d="M 36.960003,52.800003 A 10.56,10.56 0,0,0 36.960003,63.36" class="nofill"></path>
+    <line x1="36.960003" y1="63.36" x2="42.24" y2="63.36" class="solid"></line>
+    <path d="M 42.24,52.800003 A 10.56,10.56 0,0,1 42.24,63.36" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/effect/flowerpower.flf b/static/db/jave/effect/flowerpower.flf
similarity index 100%
rename from db/jave/effect/flowerpower.flf
rename to static/db/jave/effect/flowerpower.flf
diff --git a/static/db/jave/effect/flowerpower.svg b/static/db/jave/effect/flowerpower.svg
new file mode 100644
index 0000000..b4086af
--- /dev/null
+++ b/static/db/jave/effect/flowerpower.svg
@@ -0,0 +1,156 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="105.600006" 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="63.36" height="105.600006"></rect>
+  <text x="11.88" y="18.480001" >&#39;</text>
+  <text x="43.56" y="18.480001" >`</text>
+  <text x="22.44" y="29.04" >&#39;</text>
+  <text x="33" y="50.160004" >`</text>
+  <line x1="2.64" y1="60.72" x2="2.64" y2="73.920006" class="solid"></line>
+  <text x="6.6000004" y="60.72" >&#39;</text>
+  <line x1="0" y1="73.920006" x2="5.28" y2="84.48" class="solid"></line>
+  <text x="27.720001" y="81.840004" >o</text>
+  <text x="6.6000004" y="92.4" >&#39;.</text>
+  <text x="27.720001" y="92.4" >,</text>
+  <text x="43.56" y="92.4" >.</text>
+  <g>
+    <line x1="15.84" y1="10.56" x2="36.960003" y2="10.56" class="solid"></line>
+    <path d="M 15.84,10.56 A 21.12,21.12 0,0,0 5.28,21.12" class="nofill"></path>
+    <line x1="5.28" y1="21.12" x2="2.64" y2="26.400002" class="solid"></line>
+    <line x1="2.64" y1="26.400002" x2="2.64" y2="42.24" class="solid"></line>
+    <line x1="2.64" y1="42.24" x2="23.76" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="31.68" x2="23.76" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="21.12" x2="36.960003" y2="21.12" class="solid"></line>
+    <line x1="36.960003" y1="21.12" x2="42.24" y2="31.68" class="solid"></line>
+    <line x1="42.24" y1="31.68" x2="36.960003" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 42.24,10.56 A 21.12,21.12 0,0,1 52.800003,21.12" class="nofill"></path>
+    <line x1="52.800003" y1="21.12" x2="55.440002" y2="26.400002" class="solid"></line>
+    <line x1="55.440002" y1="26.400002" x2="55.440002" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="52.800003" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="47.52" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="47.52" x2="31.68" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="63.36" x2="31.68" y2="63.36" class="solid"></line>
+    <path d="M 26.400002,63.36 A 10.56,10.56 0,0,0 26.400002,73.920006" class="nofill"></path>
+    <path d="M 31.68,63.36 A 10.56,10.56 0,0,1 31.68,73.920006" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="15.84" y1="73.920006" x2="21.12" y2="73.920006" class="solid"></line>
+    <path d="M 15.84,73.920006 A 10.56,10.56 0,0,0 15.84,84.48" class="nofill"></path>
+    <line x1="15.84" y1="84.48" x2="21.12" y2="84.48" class="solid"></line>
+    <path d="M 21.12,84.48 A 10.56,10.56 0,0,0 21.12,95.04" class="nofill"></path>
+    <line x1="21.12" y1="95.04" x2="26.400002" y2="95.04" class="solid"></line>
+  </g>
+  <g>
+    <line x1="36.960003" y1="73.920006" x2="42.24" y2="73.920006" class="solid"></line>
+    <line x1="36.960003" y1="84.48" x2="42.24" y2="84.48" class="solid"></line>
+    <path d="M 42.24,73.920006 A 10.56,10.56 0,0,1 42.24,84.48" class="nofill"></path>
+    <line x1="31.68" y1="95.04" x2="36.960003" y2="95.04" class="solid"></line>
+    <path d="M 36.960003,84.48 A 10.56,10.56 0,0,1 36.960003,95.04" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="58.08" y1="73.920006" x2="52.800003" y2="84.48" class="solid"></line>
+    <path d="M 52.800003,84.48 A 21.12,21.12 0,0,1 42.24,95.04" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/effect/funface.flf b/static/db/jave/effect/funface.flf
similarity index 100%
rename from db/jave/effect/funface.flf
rename to static/db/jave/effect/funface.flf
diff --git a/static/db/jave/effect/funface.svg b/static/db/jave/effect/funface.svg
new file mode 100644
index 0000000..4256d04
--- /dev/null
+++ b/static/db/jave/effect/funface.svg
@@ -0,0 +1,131 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="84.48" 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="42.24" height="84.48"></rect>
+  <line x1="21.12" y1="10.56" x2="13.200001" y2="26.400002" class="solid end_marked_open_circle"></line>
+  <path d="M 21.12,10.56 A 10.56,10.56 0,0,1 21.12,21.12" class="nofill"></path>
+  <path d="M 10.56,21.12 A 10.56,10.56 0,0,0 10.56,31.68" class="nofill"></path>
+  <text x="27.720001" y="29.04" >O</text>
+  <path d="M 31.68,21.12 A 10.56,10.56 0,0,1 31.68,31.68" class="nofill"></path>
+  <text x="6.6000004" y="50.160004" >|</text>
+  <text x="33" y="50.160004" >|</text>
+  <line x1="10.56" y1="52.800003" x2="5.28" y2="63.36" class="solid"></line>
+  <text x="11.88" y="60.72" >,</text>
+  <line x1="34.32" y1="52.800003" x2="34.32" y2="66" class="solid"></line>
+  <line x1="0" y1="68.64" x2="5.28" y2="68.64" class="solid"></line>
+  <text x="6.6000004" y="71.28001" >&#39;</text>
+  <text x="27.720001" y="71.28001" >&#39;</text>
+  <g>
+    <path d="M 15.84,21.12 A 10.56,10.56 0,0,1 15.84,31.68" class="nofill"></path>
+    <line x1="15.84" y1="31.68" x2="10.56" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 26.400002,21.12 A 10.56,10.56 0,0,0 26.400002,31.68" class="nofill"></path>
+    <line x1="26.400002" y1="31.68" x2="31.68" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="31.68" x2="15.84" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <path d="M 15.84,42.24 A 10.56,10.56 0,0,0 15.84,52.800003" class="nofill"></path>
+    <line x1="15.84" y1="52.800003" x2="26.400002" y2="52.800003" class="solid"></line>
+    <path d="M 26.400002,42.24 A 10.56,10.56 0,0,1 26.400002,52.800003" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="15.84" y1="58.08" x2="23.76" y2="58.08" class="solid"></line>
+    <path d="M 23.76,58.08 A 5.28,5.28 0,0,1 29.04,63.36" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/effect/funfaces.flf b/static/db/jave/effect/funfaces.flf
similarity index 100%
rename from db/jave/effect/funfaces.flf
rename to static/db/jave/effect/funfaces.flf
diff --git a/static/db/jave/effect/funfaces.svg b/static/db/jave/effect/funfaces.svg
new file mode 100644
index 0000000..4256d04
--- /dev/null
+++ b/static/db/jave/effect/funfaces.svg
@@ -0,0 +1,131 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="84.48" 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="42.24" height="84.48"></rect>
+  <line x1="21.12" y1="10.56" x2="13.200001" y2="26.400002" class="solid end_marked_open_circle"></line>
+  <path d="M 21.12,10.56 A 10.56,10.56 0,0,1 21.12,21.12" class="nofill"></path>
+  <path d="M 10.56,21.12 A 10.56,10.56 0,0,0 10.56,31.68" class="nofill"></path>
+  <text x="27.720001" y="29.04" >O</text>
+  <path d="M 31.68,21.12 A 10.56,10.56 0,0,1 31.68,31.68" class="nofill"></path>
+  <text x="6.6000004" y="50.160004" >|</text>
+  <text x="33" y="50.160004" >|</text>
+  <line x1="10.56" y1="52.800003" x2="5.28" y2="63.36" class="solid"></line>
+  <text x="11.88" y="60.72" >,</text>
+  <line x1="34.32" y1="52.800003" x2="34.32" y2="66" class="solid"></line>
+  <line x1="0" y1="68.64" x2="5.28" y2="68.64" class="solid"></line>
+  <text x="6.6000004" y="71.28001" >&#39;</text>
+  <text x="27.720001" y="71.28001" >&#39;</text>
+  <g>
+    <path d="M 15.84,21.12 A 10.56,10.56 0,0,1 15.84,31.68" class="nofill"></path>
+    <line x1="15.84" y1="31.68" x2="10.56" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 26.400002,21.12 A 10.56,10.56 0,0,0 26.400002,31.68" class="nofill"></path>
+    <line x1="26.400002" y1="31.68" x2="31.68" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="31.68" x2="15.84" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <path d="M 15.84,42.24 A 10.56,10.56 0,0,0 15.84,52.800003" class="nofill"></path>
+    <line x1="15.84" y1="52.800003" x2="26.400002" y2="52.800003" class="solid"></line>
+    <path d="M 26.400002,42.24 A 10.56,10.56 0,0,1 26.400002,52.800003" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="15.84" y1="58.08" x2="23.76" y2="58.08" class="solid"></line>
+    <path d="M 23.76,58.08 A 5.28,5.28 0,0,1 29.04,63.36" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/effect/ghost.flf b/static/db/jave/effect/ghost.flf
similarity index 100%
rename from db/jave/effect/ghost.flf
rename to static/db/jave/effect/ghost.flf
diff --git a/static/db/jave/effect/ghost.svg b/static/db/jave/effect/ghost.svg
new file mode 100644
index 0000000..5195566
--- /dev/null
+++ b/static/db/jave/effect/ghost.svg
@@ -0,0 +1,161 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="105.600006" 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="63.36" height="105.600006"></rect>
+  <path d="M 21.12,0 A 10.56,10.56 0,0,0 21.12,10.56" class="nofill"></path>
+  <text x="22.44" y="7.92" >&#39;</text>
+  <text x="22.44" y="18.480001" >OO</text>
+  <text x="43.56" y="18.480001" >.</text>
+  <line x1="47.52" y1="15.84" x2="52.800003" y2="15.84" class="solid"></line>
+  <text x="54.120003" y="18.480001" >.</text>
+  <text x="22.44" y="29.04" >.</text>
+  <line x1="58.08" y1="21.12" x2="52.800003" y2="31.68" class="solid"></line>
+  <text x="22.44" y="50.160004" >&#39;</text>
+  <text x="54.120003" y="50.160004" >|</text>
+  <line x1="13.200001" y1="52.800003" x2="13.200001" y2="63.36" class="solid"></line>
+  <text x="33" y="60.72" >.</text>
+  <text x="11.88" y="71.28001" >|</text>
+  <g>
+    <line x1="26.400002" y1="5.28" x2="31.68" y2="5.28" class="solid"></line>
+    <path d="M 31.68,5.28 A 5.28,5.28 0,0,1 35.640003,7.92" class="nofill"></path>
+    <line x1="35.640003" y1="7.92" x2="36.960003" y2="10.56" class="solid"></line>
+    <path d="M 36.960003,10.56 A 10.56,10.56 0,0,1 36.960003,21.12" class="nofill"></path>
+  </g>
+  <g>
+    <path d="M 15.84,10.56 A 10.56,10.56 0,0,0 15.84,21.12" class="nofill"></path>
+    <line x1="15.84" y1="21.12" x2="13.200001" y2="26.400002" class="solid"></line>
+    <line x1="13.200001" y1="26.400002" x2="13.200001" y2="44.88" class="solid"></line>
+    <path d="M 5.28,47.52 A 1.98,1.98 0,0,0 3.96,50.160004" class="nofill"></path>
+    <line x1="3.96" y1="50.160004" x2="10.56" y2="63.36" class="solid"></line>
+    <line x1="5.28" y1="47.52" x2="10.56" y2="47.52" class="solid"></line>
+    <path d="M 13.200001,44.88 A 2.64,2.64 0,0,1 10.56,47.52" class="nofill"></path>
+    <path d="M 13.200001,44.88 A 2.64,2.64 0,0,0 15.84,47.52" class="nofill"></path>
+    <line x1="15.84" y1="47.52" x2="21.12" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="31.68" y1="26.400002" x2="42.24" y2="26.400002" class="solid"></line>
+    <line x1="44.88" y1="21.12" x2="44.88" y2="23.76" class="solid"></line>
+    <path d="M 44.88,23.76 A 10.56,10.56 0,0,0 46.2,29.04" class="nofill"></path>
+    <path d="M 42.24,26.400002 A 5.28,5.28 0,0,1 46.2,29.04" class="nofill"></path>
+    <line x1="46.2" y1="29.04" x2="52.800003" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="36.960003" x2="34.32" y2="36.960003" class="solid"></line>
+    <path d="M 34.32,36.960003 A 5.28,5.28 0,0,1 39.600002,42.24" class="nofill"></path>
+    <line x1="39.600002" y1="42.24" x2="39.600002" y2="55.440002" class="solid"></line>
+  </g>
+  <g>
+    <line x1="23.76" y1="52.800003" x2="23.76" y2="63.36" class="solid"></line>
+    <line x1="23.76" y1="63.36" x2="31.68" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <line x1="55.440002" y1="52.800003" x2="55.440002" y2="87.12" class="solid"></line>
+    <path d="M 31.68,68.64 A 2.64,2.64 0,0,0 29.04,71.28001" class="nofill"></path>
+    <line x1="29.04" y1="71.28001" x2="29.04" y2="87.12" class="solid"></line>
+    <line x1="31.68" y1="68.64" x2="36.960003" y2="68.64" class="solid"></line>
+    <path d="M 36.960003,68.64 A 2.64,2.64 0,0,1 39.600002,71.28001" class="nofill"></path>
+    <line x1="39.600002" y1="71.28001" x2="39.600002" y2="87.12" class="solid"></line>
+    <path d="M 39.600002,87.12 A 2.64,2.64 0,0,0 42.24,89.76" class="nofill"></path>
+    <line x1="42.24" y1="89.76" x2="52.800003" y2="89.76" class="solid"></line>
+    <path d="M 55.440002,87.12 A 2.64,2.64 0,0,1 52.800003,89.76" class="nofill"></path>
+    <line x1="13.200001" y1="73.920006" x2="13.200001" y2="87.12" class="solid"></line>
+    <path d="M 13.200001,87.12 A 2.64,2.64 0,0,0 15.84,89.76" class="nofill"></path>
+    <line x1="15.84" y1="89.76" x2="26.400002" y2="89.76" class="solid"></line>
+    <path d="M 29.04,87.12 A 2.64,2.64 0,0,1 26.400002,89.76" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/effect/lildevil.flf b/static/db/jave/effect/lildevil.flf
similarity index 100%
rename from db/jave/effect/lildevil.flf
rename to static/db/jave/effect/lildevil.flf
diff --git a/static/db/jave/effect/lildevil.svg b/static/db/jave/effect/lildevil.svg
new file mode 100644
index 0000000..b863175
--- /dev/null
+++ b/static/db/jave/effect/lildevil.svg
@@ -0,0 +1,154 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="95.04" 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="58.08" height="95.04"></rect>
+  <text x="11.88" y="7.92" >`</text>
+  <line x1="15.84" y1="5.28" x2="21.12" y2="5.28" class="solid"></line>
+  <text x="22.44" y="7.92" >&#39;</text>
+  <line x1="11.88" y1="18.480001" x2="13.200001" y2="15.84" class="solid end_marked_big_open_circle"></line>
+  <text x="17.16" y="18.480001" >O</text>
+  <text x="33" y="18.480001" >.</text>
+  <text x="17.16" y="29.04" >,</text>
+  <text x="33" y="39.600002" >`.</text>
+  <text x="17.16" y="50.160004" >&#39;</text>
+  <text x="33" y="50.160004" >.&#39;</text>
+  <text x="48.84" y="50.160004" >|</text>
+  <path d="M 5.28,52.800003 A 10.56,10.56 0,0,0 5.28,63.36" class="nofill"></path>
+  <g>
+    <path d="M 10.56,0 A 10.56,10.56 0,0,0 10.56,10.56" class="nofill"></path>
+    <path d="M 10.56,10.56 A 10.56,10.56 0,0,0 10.56,21.12" class="nofill"></path>
+    <line x1="10.56" y1="21.12" x2="7.92" y2="26.400002" class="solid"></line>
+    <line x1="7.92" y1="26.400002" x2="7.92" y2="44.88" class="solid"></line>
+    <path d="M 7.92,44.88 A 2.64,2.64 0,0,0 10.56,47.52" class="nofill"></path>
+    <line x1="10.56" y1="47.52" x2="15.84" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 26.400002,0 A 10.56,10.56 0,0,1 26.400002,10.56" class="nofill"></path>
+    <path d="M 26.400002,10.56 A 10.56,10.56 0,0,1 26.400002,21.12" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="42.24" y1="10.56" x2="47.52" y2="10.56" class="solid"></line>
+    <line x1="36.960003" y1="15.84" x2="44.88" y2="15.84" class="solid"></line>
+    <line x1="47.52" y1="10.56" x2="42.24" y2="21.12" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="26.400002" x2="36.960003" y2="26.400002" class="solid"></line>
+    <path d="M 36.960003,26.400002 A 5.28,5.28 0,0,1 40.920002,29.04" class="nofill"></path>
+    <line x1="40.920002" y1="29.04" x2="47.52" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="31.68" x2="23.76" y2="47.52" class="solid"></line>
+    <line x1="31.68" y1="31.68" x2="23.76" y2="47.52" class="solid"></line>
+    <line x1="23.76" y1="47.52" x2="23.76" y2="52.800003" class="solid"></line>
+    <line x1="23.76" y1="52.800003" x2="31.68" y2="52.800003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="7.92" y1="52.800003" x2="7.92" y2="76.560005" class="solid"></line>
+    <path d="M 7.92,76.560005 A 2.64,2.64 0,0,0 10.56,79.200005" class="nofill"></path>
+    <line x1="10.56" y1="79.200005" x2="21.12" y2="79.200005" class="solid"></line>
+    <path d="M 26.400002,58.08 A 2.64,2.64 0,0,0 23.76,60.72" class="nofill"></path>
+    <line x1="23.76" y1="60.72" x2="23.76" y2="76.560005" class="solid"></line>
+    <line x1="26.400002" y1="58.08" x2="31.68" y2="58.08" class="solid"></line>
+    <path d="M 31.68,58.08 A 2.64,2.64 0,0,1 34.32,60.72" class="nofill"></path>
+    <line x1="34.32" y1="60.72" x2="34.32" y2="76.560005" class="solid"></line>
+    <path d="M 23.76,76.560005 A 2.64,2.64 0,0,1 21.12,79.200005" class="nofill"></path>
+    <path d="M 34.32,76.560005 A 2.64,2.64 0,0,0 36.960003,79.200005" class="nofill"></path>
+    <line x1="36.960003" y1="79.200005" x2="47.52" y2="79.200005" class="solid"></line>
+    <line x1="50.160004" y1="52.800003" x2="50.160004" y2="76.560005" class="solid"></line>
+    <path d="M 50.160004,76.560005 A 2.64,2.64 0,0,1 47.52,79.200005" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/effect/rammstein.flf b/static/db/jave/effect/rammstein.flf
similarity index 100%
rename from db/jave/effect/rammstein.flf
rename to static/db/jave/effect/rammstein.flf
diff --git a/static/db/jave/effect/rammstein.svg b/static/db/jave/effect/rammstein.svg
new file mode 100644
index 0000000..eca6fe1
--- /dev/null
+++ b/static/db/jave/effect/rammstein.svg
@@ -0,0 +1,116 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="73.920006" height="73.920006" 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="73.920006" height="73.920006"></rect>
+  <g>
+    <line x1="18.480001" y1="10.56" x2="50.160004" y2="10.56" class="solid"></line>
+    <line x1="50.160004" y1="10.56" x2="50.160004" y2="21.12" class="solid"></line>
+    <line x1="50.160004" y1="21.12" x2="66" y2="21.12" class="solid"></line>
+    <line x1="66" y1="21.12" x2="66" y2="52.800003" class="solid"></line>
+    <line x1="50.160004" y1="52.800003" x2="66" y2="52.800003" class="solid"></line>
+    <line x1="2.64" y1="21.12" x2="26.400002" y2="21.12" class="solid"></line>
+    <line x1="18.480001" y1="10.56" x2="18.480001" y2="21.12" class="solid"></line>
+    <line x1="2.64" y1="21.12" x2="2.64" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="42.24" y2="52.800003" class="solid"></line>
+    <line x1="2.64" y1="52.800003" x2="18.480001" y2="52.800003" class="solid"></line>
+    <line x1="18.480001" y1="42.24" x2="18.480001" y2="63.36" class="solid"></line>
+    <line x1="18.480001" y1="63.36" x2="50.160004" y2="63.36" class="solid"></line>
+    <line x1="50.160004" y1="52.800003" x2="50.160004" y2="63.36" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="26.400002" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="52.800003" x2="42.24" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/effect/train.flf b/static/db/jave/effect/train.flf
similarity index 100%
rename from db/jave/effect/train.flf
rename to static/db/jave/effect/train.flf
diff --git a/static/db/jave/effect/train.svg b/static/db/jave/effect/train.svg
new file mode 100644
index 0000000..53b13c5
--- /dev/null
+++ b/static/db/jave/effect/train.svg
@@ -0,0 +1,128 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="73.920006" 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="47.52" height="73.920006"></rect>
+  <line x1="21.12" y1="26.400002" x2="26.400002" y2="26.400002" class="solid"></line>
+  <text x="33" y="50.160004" >&quot;</text>
+  <text x="1.32" y="60.72" >&quot;</text>
+  <text x="17.16" y="60.72" >0</text>
+  <line x1="21.12" y1="58.08" x2="26.400002" y2="58.08" class="solid"></line>
+  <text x="27.720001" y="60.72" >0</text>
+  <text x="11.88" y="50.160004" ></text>
+  <text x="22.44" y="50.160004" ></text>
+  <g>
+    <line x1="15.84" y1="10.56" x2="31.68" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="13.200001" y2="15.84" class="solid"></line>
+    <line x1="13.200001" y1="15.84" x2="13.200001" y2="42.24" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="34.32" y2="15.84" class="solid"></line>
+    <line x1="34.32" y1="15.84" x2="34.32" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="42.24" x2="34.32" y2="42.24" class="solid"></line>
+    <line x1="23.76" y1="31.68" x2="23.76" y2="42.24" class="solid"></line>
+  </g>
+  <g>
+    <line x1="0" y1="52.800003" x2="7.92" y2="52.800003" class="solid"></line>
+    <line x1="7.92" y1="42.24" x2="7.92" y2="55.440002" class="solid"></line>
+    <line x1="5.28" y1="52.800003" x2="10.56" y2="58.08" class="solid"></line>
+    <path d="M 7.92,55.440002 A 2.64,2.64 0,0,0 10.56,58.08" class="nofill"></path>
+    <line x1="10.56" y1="58.08" x2="15.84" y2="58.08" class="solid"></line>
+  </g>
+  <g>
+    <line x1="39.600002" y1="42.24" x2="39.600002" y2="55.440002" class="solid"></line>
+    <line x1="31.68" y1="58.08" x2="36.960003" y2="58.08" class="solid"></line>
+    <path d="M 39.600002,55.440002 A 2.64,2.64 0,0,1 36.960003,58.08" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/effect/twisted.flf b/static/db/jave/effect/twisted.flf
similarity index 100%
rename from db/jave/effect/twisted.flf
rename to static/db/jave/effect/twisted.flf
diff --git a/static/db/jave/effect/twisted.svg b/static/db/jave/effect/twisted.svg
new file mode 100644
index 0000000..7507e78
--- /dev/null
+++ b/static/db/jave/effect/twisted.svg
@@ -0,0 +1,140 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="84.48" 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="63.36" height="84.48"></rect>
+  <g>
+    <line x1="15.84" y1="10.56" x2="42.24" y2="10.56" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="5.28" y2="31.68" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="21.12" y2="21.12" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="36.960003" y2="21.12" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="36.960003" y2="21.12" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="52.800003" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="15.84" y2="31.68" class="solid"></line>
+    <line x1="36.960003" y1="21.12" x2="42.24" y2="31.68" class="solid"></line>
+    <line x1="5.28" y1="31.68" x2="10.56" y2="42.24" class="solid"></line>
+    <line x1="15.84" y1="31.68" x2="21.12" y2="42.24" class="solid"></line>
+    <line x1="42.24" y1="31.68" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="52.800003" y1="31.68" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="42.24" x2="5.28" y2="52.800003" class="solid"></line>
+    <line x1="21.12" y1="42.24" x2="15.84" y2="52.800003" class="solid"></line>
+    <line x1="36.960003" y1="42.24" x2="42.24" y2="52.800003" class="solid"></line>
+    <line x1="47.52" y1="42.24" x2="52.800003" y2="52.800003" class="solid"></line>
+    <path d="M 5.28,52.800003 A 10.56,10.56 0,0,0 5.28,63.36" class="nofill"></path>
+    <path d="M 15.84,52.800003 A 10.56,10.56 0,0,0 15.84,63.36" class="nofill"></path>
+    <line x1="15.84" y1="63.36" x2="21.12" y2="63.36" class="solid"></line>
+    <path d="M 52.800003,52.800003 A 10.56,10.56 0,0,1 52.800003,63.36" class="nofill"></path>
+    <line x1="5.28" y1="63.36" x2="10.56" y2="73.920006" class="solid"></line>
+    <line x1="15.84" y1="63.36" x2="10.56" y2="73.920006" class="solid"></line>
+    <line x1="10.56" y1="73.920006" x2="21.12" y2="73.920006" class="solid"></line>
+    <line x1="26.400002" y1="52.800003" x2="31.68" y2="52.800003" class="solid"></line>
+    <path d="M 26.400002,52.800003 A 10.56,10.56 0,0,0 26.400002,63.36" class="nofill"></path>
+    <path d="M 31.68,52.800003 A 10.56,10.56 0,0,1 31.68,63.36" class="nofill"></path>
+    <line x1="26.400002" y1="63.36" x2="21.12" y2="73.920006" class="solid"></line>
+    <line x1="31.68" y1="63.36" x2="36.960003" y2="73.920006" class="solid"></line>
+    <line x1="36.960003" y1="73.920006" x2="47.52" y2="73.920006" class="solid"></line>
+    <line x1="36.960003" y1="63.36" x2="42.24" y2="63.36" class="solid"></line>
+    <path d="M 42.24,52.800003 A 10.56,10.56 0,0,1 42.24,63.36" class="nofill"></path>
+    <line x1="42.24" y1="63.36" x2="47.52" y2="73.920006" class="solid"></line>
+    <line x1="52.800003" y1="63.36" x2="47.52" y2="73.920006" class="solid"></line>
+  </g>
+  <g>
+    <line x1="26.400002" y1="31.68" x2="31.68" y2="31.68" class="solid"></line>
+    <path d="M 26.400002,31.68 A 10.56,10.56 0,0,0 26.400002,42.24" class="nofill"></path>
+    <line x1="26.400002" y1="42.24" x2="31.68" y2="42.24" class="solid"></line>
+    <path d="M 31.68,31.68 A 10.56,10.56 0,0,1 31.68,42.24" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/effect/wetletter.flf b/static/db/jave/effect/wetletter.flf
similarity index 100%
rename from db/jave/effect/wetletter.flf
rename to static/db/jave/effect/wetletter.flf
diff --git a/static/db/jave/effect/wetletter.svg b/static/db/jave/effect/wetletter.svg
new file mode 100644
index 0000000..ca42140
--- /dev/null
+++ b/static/db/jave/effect/wetletter.svg
@@ -0,0 +1,121 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="73.920006" 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="47.52" height="73.920006"></rect>
+  <path d="M 31.68,42.24 A 10.56,10.56 0,0,1 31.68,52.800003" class="nofill"></path>
+  <text x="27.720001" y="60.72" >(</text>
+  <line x1="31.68" y1="63.36" x2="36.960003" y2="63.36" class="solid"></line>
+  <text x="38.280003" y="60.72" >)</text>
+  <g>
+    <path d="M 15.84,5.28 A 5.28,5.28 0,0,0 11.88,7.92" class="nofill"></path>
+    <line x1="11.88" y1="7.92" x2="2.64" y2="26.400002" class="solid"></line>
+    <line x1="15.84" y1="5.28" x2="26.400002" y2="5.28" class="solid"></line>
+    <path d="M 26.400002,5.28 A 5.28,5.28 0,0,1 30.36,7.92" class="nofill"></path>
+    <line x1="30.36" y1="7.92" x2="39.600002" y2="26.400002" class="solid"></line>
+    <line x1="2.64" y1="26.400002" x2="2.64" y2="63.36" class="solid"></line>
+    <line x1="39.600002" y1="26.400002" x2="39.600002" y2="52.800003" class="solid"></line>
+    <line x1="13.200001" y1="42.24" x2="29.04" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="42.24" x2="13.200001" y2="63.36" class="solid"></line>
+    <line x1="29.04" y1="42.24" x2="29.04" y2="52.800003" class="solid"></line>
+    <line x1="2.64" y1="63.36" x2="13.200001" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <line x1="21.12" y1="10.56" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="10.56" y1="31.68" x2="31.68" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/fill/4max.flf b/static/db/jave/fill/4max.flf
similarity index 100%
rename from db/jave/fill/4max.flf
rename to static/db/jave/fill/4max.flf
diff --git a/static/db/jave/fill/4max.svg b/static/db/jave/fill/4max.svg
new file mode 100644
index 0000000..987da55
--- /dev/null
+++ b/static/db/jave/fill/4max.svg
@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="52.800003" 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="47.52" height="52.800003"></rect>
+  <text x="17.16" y="7.92" >db</text>
+  <text x="11.88" y="18.480001" >dPYb</text>
+  <text x="6.6000004" y="29.04" >dP</text>
+  <line x1="15.84" y1="31.68" x2="26.400002" y2="31.68" class="solid"></line>
+  <text x="27.720001" y="29.04" >Yb</text>
+  <text x="1.32" y="39.600002" >dP</text>
+  <text x="33" y="39.600002" >Yb</text>
+  <text x="11.88" y="39.600002" ></text>
+  <text x="22.44" y="39.600002" ></text>
+</svg>
diff --git a/db/jave/fill/Georgia11.flf b/static/db/jave/fill/Georgia11.flf
similarity index 100%
rename from db/jave/fill/Georgia11.flf
rename to static/db/jave/fill/Georgia11.flf
diff --git a/static/db/jave/fill/Georgia11.svg b/static/db/jave/fill/Georgia11.svg
new file mode 100644
index 0000000..d2cff7d
--- /dev/null
+++ b/static/db/jave/fill/Georgia11.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="105.600006" 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="79.200005" height="105.600006"></rect>
+  <text x="33" y="29.04" >db</text>
+  <text x="27.720001" y="39.600002" >;MM:</text>
+  <text x="22.44" y="50.160004" >,V^MM.</text>
+  <text x="17.16" y="60.72" >,M</text>
+  <text x="38.280003" y="60.72" >`MM</text>
+  <text x="17.16" y="71.28001" >AbmmmqMA</text>
+  <text x="11.88" y="81.840004" >A&#39;</text>
+  <text x="48.84" y="81.840004" >VML</text>
+  <text x="1.32" y="92.4" >.AMA.</text>
+  <text x="43.56" y="92.4" >.AMMA.</text>
+</svg>
diff --git a/db/jave/fill/alligator3.flf b/static/db/jave/fill/alligator3.flf
similarity index 100%
rename from db/jave/fill/alligator3.flf
rename to static/db/jave/fill/alligator3.flf
diff --git a/static/db/jave/fill/alligator3.svg b/static/db/jave/fill/alligator3.svg
new file mode 100644
index 0000000..a6302d9
--- /dev/null
+++ b/static/db/jave/fill/alligator3.svg
@@ -0,0 +1,155 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="84.48" 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="63.36" height="84.48"></rect>
+  <line x1="23.76" y1="0" x2="23.76" y2="21.12" class="broken"></line>
+  <text x="27.720001" y="7.92" >:</text>
+  <line x1="34.32" y1="0" x2="34.32" y2="21.12" class="broken"></line>
+  <line x1="39.600002" y1="15.84" x2="39.600002" y2="34.32" class="solid"></line>
+  <line x1="7.92" y1="26.400002" x2="7.92" y2="34.32" class="solid"></line>
+  <rect x="5.28" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="39.600002" x2="7.92" y2="44.88" class="solid"></line>
+  <text x="22.44" y="39.600002" >:</text>
+  <line x1="29.04" y1="36.960003" x2="36.960003" y2="36.960003" class="solid"></line>
+  <rect x="36.960003" y="34.32" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <text x="54.120003" y="39.600002" >:</text>
+  <rect x="5.28" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="50.160004" x2="7.92" y2="66" class="solid"></line>
+  <rect x="47.52" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="50.160004" y1="50.160004" x2="50.160004" y2="66" class="solid"></line>
+  <rect x="0" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="60.72" x2="2.64" y2="66" class="solid"></line>
+  <line x1="5.28" y1="58.08" x2="10.56" y2="58.08" class="solid"></line>
+  <rect x="10.56" y="55.440002" width="5.2799997" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="60.72" x2="13.200001" y2="66" class="solid"></line>
+  <rect x="42.24" y="55.440002" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="60.72" x2="44.88" y2="66" class="solid"></line>
+  <line x1="47.52" y1="58.08" x2="52.800003" y2="58.08" class="solid"></line>
+  <rect x="52.800003" y="55.440002" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="55.440002" y1="60.72" x2="55.440002" y2="66" class="solid"></line>
+  <rect x="0" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="5.28" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="66" width="5.2799997" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="47.52" y="66" width="5.2800026" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="52.800003" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <g>
+    <line x1="13.200001" y1="10.56" x2="13.200001" y2="55.440002" class="broken"></line>
+    <line x1="10.56" y1="47.52" x2="13.200001" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="18.480001" y1="15.84" x2="18.480001" y2="36.960003" class="solid"></line>
+    <line x1="10.56" y1="36.960003" x2="18.480001" y2="36.960003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="44.88" y1="10.56" x2="44.88" y2="55.440002" class="broken"></line>
+    <line x1="44.88" y1="47.52" x2="47.52" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="50.160004" y1="26.400002" x2="50.160004" y2="44.88" class="solid"></line>
+    <line x1="42.24" y1="36.960003" x2="50.160004" y2="36.960003" class="solid"></line>
+  </g>
+  <g>
+    <line x1="2.64" y1="36.960003" x2="5.28" y2="36.960003" class="solid"></line>
+    <line x1="2.64" y1="36.960003" x2="2.64" y2="55.440002" class="solid"></line>
+    <line x1="2.64" y1="47.52" x2="5.28" y2="47.52" class="solid"></line>
+  </g>
+  <g>
+    <line x1="55.440002" y1="42.24" x2="55.440002" y2="55.440002" class="solid"></line>
+    <line x1="52.800003" y1="47.52" x2="55.440002" y2="47.52" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/fill/amc3liv1.flf b/static/db/jave/fill/amc3liv1.flf
similarity index 100%
rename from db/jave/fill/amc3liv1.flf
rename to static/db/jave/fill/amc3liv1.flf
diff --git a/static/db/jave/fill/amc3liv1.svg b/static/db/jave/fill/amc3liv1.svg
new file mode 100644
index 0000000..cbbfabd
--- /dev/null
+++ b/static/db/jave/fill/amc3liv1.svg
@@ -0,0 +1,103 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="42.24" 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="42.24" height="42.24"></rect>
+  <text x="1.32" y="7.92" >.:;S;:.</text>
+  <text x="1.32" y="18.480001" >S</text>
+  <text x="17.16" y="18.480001" >S</text>
+  <text x="1.32" y="29.04" >`:;S;:&#39;</text>
+</svg>
diff --git a/db/jave/fill/amcaaa01.flf b/static/db/jave/fill/amcaaa01.flf
similarity index 100%
rename from db/jave/fill/amcaaa01.flf
rename to static/db/jave/fill/amcaaa01.flf
diff --git a/static/db/jave/fill/amcaaa01.svg b/static/db/jave/fill/amcaaa01.svg
new file mode 100644
index 0000000..009006e
--- /dev/null
+++ b/static/db/jave/fill/amcaaa01.svg
@@ -0,0 +1,127 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="158.40001" 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="58.08" height="158.40001"></rect>
+  <text x="6.6000004" y="7.92" >.S</text>
+  <line x1="15.84" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+  <text x="22.44" y="7.92" >SSSs</text>
+  <text x="1.32" y="18.480001" >.SS</text>
+  <line x1="15.84" y1="15.84" x2="21.12" y2="15.84" class="broken"></line>
+  <text x="22.44" y="18.480001" >SSSSS</text>
+  <text x="1.32" y="29.04" >S%S</text>
+  <text x="33" y="29.04" >SSSS</text>
+  <text x="1.32" y="39.600002" >S%S</text>
+  <text x="38.280003" y="39.600002" >S%S</text>
+  <text x="1.32" y="50.160004" >S%S</text>
+  <text x="22.44" y="50.160004" >SSSS%S</text>
+  <text x="1.32" y="60.72" >S&amp;S</text>
+  <text x="27.720001" y="60.72" >SSS%S</text>
+  <text x="1.32" y="71.28001" >S&amp;S</text>
+  <text x="38.280003" y="71.28001" >S&amp;S</text>
+  <text x="1.32" y="81.840004" >S&amp;S</text>
+  <text x="38.280003" y="81.840004" >S&amp;S</text>
+  <text x="1.32" y="92.4" >S*S</text>
+  <text x="38.280003" y="92.4" >S&amp;S</text>
+  <text x="1.32" y="102.96001" >S*S</text>
+  <text x="38.280003" y="102.96001" >S*S</text>
+  <text x="1.32" y="113.520004" >S*S</text>
+  <text x="38.280003" y="113.520004" >S*S</text>
+  <text x="1.32" y="124.08" >SSS</text>
+  <text x="38.280003" y="124.08" >S*S</text>
+  <text x="38.280003" y="134.64" >SP</text>
+  <text x="38.280003" y="145.20001" >Y</text>
+</svg>
diff --git a/db/jave/fill/amcneko.flf b/static/db/jave/fill/amcneko.flf
similarity index 100%
rename from db/jave/fill/amcneko.flf
rename to static/db/jave/fill/amcneko.flf
diff --git a/static/db/jave/fill/amcneko.svg b/static/db/jave/fill/amcneko.svg
new file mode 100644
index 0000000..5a85bee
--- /dev/null
+++ b/static/db/jave/fill/amcneko.svg
@@ -0,0 +1,119 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="105.600006" 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="63.36" height="105.600006"></rect>
+  <text x="1.32" y="7.92" >.sSSSSs.</text>
+  <text x="1.32" y="18.480001" >SSSSSSSSSs.</text>
+  <text x="1.32" y="29.04" >S</text>
+  <text x="11.88" y="29.04" >SSS</text>
+  <text x="33" y="29.04" >SSSSS</text>
+  <text x="1.32" y="39.600002" >S</text>
+  <text x="17.16" y="39.600002" >SS</text>
+  <text x="33" y="39.600002" >SSSSS</text>
+  <text x="1.32" y="50.160004" >S</text>
+  <line x1="7.92" y1="50.160004" x2="7.92" y2="52.800003" class="solid"></line>
+  <line x1="13.200001" y1="50.160004" x2="13.200001" y2="52.800003" class="solid"></line>
+  <text x="17.16" y="50.160004" >SSsSSSSS</text>
+  <text x="1.32" y="60.72" >S:::S</text>
+  <text x="33" y="60.72" >SSSSS</text>
+  <text x="1.32" y="71.28001" >S;;;S</text>
+  <text x="33" y="71.28001" >SSSSS</text>
+  <text x="1.32" y="81.840004" >S%%%S</text>
+  <text x="33" y="81.840004" >SSSSS</text>
+  <text x="1.32" y="92.4" >SSSSS</text>
+  <text x="33" y="92.4" >SSSSS</text>
+</svg>
diff --git a/db/jave/fill/amcslash.flf b/static/db/jave/fill/amcslash.flf
similarity index 100%
rename from db/jave/fill/amcslash.flf
rename to static/db/jave/fill/amcslash.flf
diff --git a/static/db/jave/fill/amcslash.svg b/static/db/jave/fill/amcslash.svg
new file mode 100644
index 0000000..3191f7c
--- /dev/null
+++ b/static/db/jave/fill/amcslash.svg
@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="105.600006" 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="52.800003" height="105.600006"></rect>
+  <text x="1.32" y="7.92" >.s5SSSs.</text>
+  <text x="33" y="18.480001" >SS.</text>
+  <text x="33" y="29.04" >S%S</text>
+  <text x="33" y="39.600002" >S%S</text>
+  <text x="33" y="50.160004" >S%S</text>
+  <text x="33" y="60.72" >S%S</text>
+  <text x="33" y="71.28001" >`:;</text>
+  <text x="33" y="81.840004" >;,.</text>
+  <text x="33" y="92.4" >;:&#39;</text>
+  <text x="1.32" y="29.04" >sS</text>
+  <text x="1.32" y="39.600002" >SS</text>
+  <text x="1.32" y="50.160004" >SSSs.</text>
+  <text x="1.32" y="60.72" >SS</text>
+  <text x="1.32" y="71.28001" >SS</text>
+  <text x="1.32" y="81.840004" >SS</text>
+  <text x="1.32" y="92.4" >:;</text>
+</svg>
diff --git a/db/jave/fill/amctubes.flf b/static/db/jave/fill/amctubes.flf
similarity index 100%
rename from db/jave/fill/amctubes.flf
rename to static/db/jave/fill/amctubes.flf
diff --git a/static/db/jave/fill/amctubes.svg b/static/db/jave/fill/amctubes.svg
new file mode 100644
index 0000000..5421559
--- /dev/null
+++ b/static/db/jave/fill/amctubes.svg
@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="84.48" 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="36.960003" height="84.48"></rect>
+  <text x="1.32" y="7.92" >d</text>
+  <text x="1.32" y="18.480001" >S</text>
+  <text x="1.32" y="29.04" >S</text>
+  <text x="1.32" y="39.600002" >S</text>
+  <text x="1.32" y="50.160004" >S</text>
+  <text x="1.32" y="60.72" >S</text>
+  <text x="1.32" y="71.28001" >P</text>
+  <text x="11.88" y="7.92" >s.</text>
+  <line x1="15.84" y1="15.84" x2="23.76" y2="15.84" class="broken end_marked_big_open_circle"></line>
+  <text x="22.44" y="29.04" >`b</text>
+  <text x="11.88" y="39.600002" >sSSO</text>
+  <text x="27.720001" y="50.160004" >O</text>
+  <text x="27.720001" y="60.72" >O</text>
+  <text x="27.720001" y="71.28001" >P</text>
+</svg>
diff --git a/db/jave/fill/bolger.flf b/static/db/jave/fill/bolger.flf
similarity index 100%
rename from db/jave/fill/bolger.flf
rename to static/db/jave/fill/bolger.flf
diff --git a/static/db/jave/fill/bolger.svg b/static/db/jave/fill/bolger.svg
new file mode 100644
index 0000000..71307b3
--- /dev/null
+++ b/static/db/jave/fill/bolger.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="73.920006" 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="63.36" height="73.920006"></rect>
+  <text x="27.720001" y="7.92" >e</text>
+  <text x="22.44" y="18.480001" >d8b</text>
+  <text x="22.44" y="29.04" >Y88b</text>
+  <text x="27.720001" y="39.600002" >Y88b</text>
+  <text x="33" y="50.160004" >Y88b</text>
+  <text x="38.280003" y="60.72" >Y88b</text>
+  <g>
+    <line x1="21.12" y1="21.12" x2="0" y2="63.36" class="solid"></line>
+    <line x1="5.28" y1="52.800003" x2="31.68" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/fill/bright.flf b/static/db/jave/fill/bright.flf
similarity index 100%
rename from db/jave/fill/bright.flf
rename to static/db/jave/fill/bright.flf
diff --git a/static/db/jave/fill/bright.svg b/static/db/jave/fill/bright.svg
new file mode 100644
index 0000000..abf2225
--- /dev/null
+++ b/static/db/jave/fill/bright.svg
@@ -0,0 +1,168 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="73.920006" 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="47.52" height="73.920006"></rect>
+  <text x="1.32" y="7.92" >.</text>
+  <rect x="10.56" y="2.64" width="5.2799997" height="5.2799997" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="7.92" x2="13.200001" y2="13.200001" class="solid"></line>
+  <rect x="15.84" y="2.64" width="5.2800007" height="5.2799997" class="solid filled" rx="0"></rect>
+  <rect x="21.12" y="2.64" width="5.2800007" height="5.2799997" class="solid filled" rx="0"></rect>
+  <rect x="26.400002" y="2.64" width="5.279999" height="5.2799997" class="solid filled" rx="0"></rect>
+  <line x1="29.04" y1="7.92" x2="29.04" y2="13.200001" class="solid"></line>
+  <text x="38.280003" y="7.92" >.</text>
+  <text x="1.32" y="18.480001" >.</text>
+  <rect x="5.28" y="13.200001" width="5.28" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="18.480001" x2="7.92" y2="23.76" class="solid"></line>
+  <rect x="10.56" y="13.200001" width="5.2799997" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="18.480001" x2="13.200001" y2="23.76" class="solid"></line>
+  <rect x="26.400002" y="13.200001" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="29.04" y1="18.480001" x2="29.04" y2="23.76" class="solid"></line>
+  <rect x="31.68" y="13.200001" width="5.2800026" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="18.480001" x2="34.32" y2="23.76" class="solid"></line>
+  <text x="38.280003" y="18.480001" >.</text>
+  <text x="1.32" y="29.04" >.</text>
+  <rect x="5.28" y="23.76" width="5.28" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="29.04" x2="7.92" y2="34.32" class="solid"></line>
+  <rect x="10.56" y="23.76" width="5.2799997" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="29.04" x2="13.200001" y2="34.32" class="solid"></line>
+  <rect x="15.84" y="23.76" width="5.2800007" height="5.2800007" class="solid filled" rx="0"></rect>
+  <rect x="21.12" y="23.76" width="5.2800007" height="5.2800007" class="solid filled" rx="0"></rect>
+  <rect x="26.400002" y="23.76" width="5.279999" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="29.04" y1="29.04" x2="29.04" y2="34.32" class="solid"></line>
+  <rect x="31.68" y="23.76" width="5.2800026" height="5.2800007" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="29.04" x2="34.32" y2="34.32" class="solid"></line>
+  <text x="38.280003" y="29.04" >.</text>
+  <text x="1.32" y="39.600002" >.</text>
+  <rect x="5.28" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="7.92" y1="39.600002" x2="7.92" y2="44.88" class="solid"></line>
+  <rect x="10.56" y="34.32" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="13.200001" y1="39.600002" x2="13.200001" y2="44.88" class="solid"></line>
+  <text x="17.16" y="39.600002" >..</text>
+  <rect x="26.400002" y="34.32" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="29.04" y1="39.600002" x2="29.04" y2="44.88" class="solid"></line>
+  <rect x="31.68" y="34.32" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="39.600002" x2="34.32" y2="44.88" class="solid"></line>
+  <text x="38.280003" y="39.600002" >.</text>
+  <text x="1.32" y="50.160004" >.</text>
+  <rect x="5.28" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="44.88" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <text x="17.16" y="50.160004" >..</text>
+  <rect x="26.400002" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <text x="38.280003" y="50.160004" >.</text>
+  <text x="1.32" y="60.72" >........</text>
+  <g>
+    <path d="M 10.56,5.28 A 2.64,2.64 0,0,0 7.92,7.92" class="nofill"></path>
+    <line x1="7.92" y1="7.92" x2="7.92" y2="13.200001" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 31.68,5.28 A 2.64,2.64 0,0,1 34.32,7.92" class="nofill"></path>
+    <line x1="34.32" y1="7.92" x2="34.32" y2="13.200001" class="solid"></line>
+  </g>
+  <g>
+    <line x1="15.84" y1="15.84" x2="18.480001" y2="15.84" class="solid"></line>
+    <path d="M 15.84,15.84 A 2.64,2.64 0,0,1 18.480001,18.480001" class="nofill"></path>
+    <path d="M 18.480001,15.84 A 5.28,5.28 0,0,1 23.76,21.12" class="nofill"></path>
+    <line x1="18.480001" y1="18.480001" x2="18.480001" y2="23.76" class="solid"></line>
+  </g>
+  <g>
+    <path d="M 23.76,15.84 A 5.28,5.28 0,0,0 18.480001,21.12" class="nofill"></path>
+    <line x1="23.76" y1="15.84" x2="26.400002" y2="15.84" class="solid"></line>
+    <path d="M 26.400002,15.84 A 2.64,2.64 0,0,0 23.76,18.480001" class="nofill"></path>
+    <line x1="23.76" y1="18.480001" x2="23.76" y2="23.76" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/fill/defleppard.flf b/static/db/jave/fill/defleppard.flf
similarity index 100%
rename from db/jave/fill/defleppard.flf
rename to static/db/jave/fill/defleppard.flf
diff --git a/static/db/jave/fill/defleppard.svg b/static/db/jave/fill/defleppard.svg
new file mode 100644
index 0000000..bc3ace7
--- /dev/null
+++ b/static/db/jave/fill/defleppard.svg
@@ -0,0 +1,171 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="168.96" 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="79.200005" height="168.96"></rect>
+  <text x="64.68" y="50.160004" >..</text>
+  <text x="59.4" y="60.72" >;W,</text>
+  <text x="54.120003" y="71.28001" >j</text>
+  <rect x="58.08" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="71.28001" x2="60.72" y2="76.560005" class="solid"></line>
+  <rect x="63.36" y="66" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <line x1="66" y1="71.28001" x2="66" y2="76.560005" class="solid"></line>
+  <text x="69.96" y="71.28001" >,</text>
+  <text x="48.84" y="81.840004" >G</text>
+  <rect x="52.800003" y="76.560005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="55.440002" y1="81.840004" x2="55.440002" y2="87.12" class="solid"></line>
+  <rect x="58.08" y="76.560005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="81.840004" x2="60.72" y2="87.12" class="solid"></line>
+  <rect x="63.36" y="76.560005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="66" y1="81.840004" x2="66" y2="87.12" class="solid"></line>
+  <text x="69.96" y="81.840004" >,</text>
+  <text x="38.280003" y="92.4" >:E</text>
+  <rect x="47.52" y="87.12" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="52.800003" y="87.12" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="58.08" y="87.12" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="92.4" x2="60.72" y2="97.68" class="solid"></line>
+  <rect x="63.36" y="87.12" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="66" y1="92.4" x2="66" y2="97.68" class="solid"></line>
+  <text x="69.96" y="92.4" >,</text>
+  <text x="33" y="102.96001" >;W</text>
+  <rect x="42.24" y="97.68" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <line x1="44.88" y1="102.96001" x2="44.88" y2="108.240005" class="solid"></line>
+  <text x="48.84" y="102.96001" >DG</text>
+  <rect x="58.08" y="97.68" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="102.96001" x2="60.72" y2="108.240005" class="solid"></line>
+  <rect x="63.36" y="97.68" width="5.279999" height="5.2800064" class="solid filled" rx="0"></rect>
+  <line x1="66" y1="102.96001" x2="66" y2="108.240005" class="solid"></line>
+  <text x="69.96" y="102.96001" >,</text>
+  <text x="27.720001" y="113.520004" >j</text>
+  <rect x="31.68" y="108.240005" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="113.520004" x2="34.32" y2="118.8" class="solid"></line>
+  <rect x="36.960003" y="108.240005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="42.24" y="108.240005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <text x="48.84" y="113.520004" >DW</text>
+  <rect x="58.08" y="108.240005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="113.520004" x2="60.72" y2="118.8" class="solid"></line>
+  <rect x="63.36" y="108.240005" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="66" y1="113.520004" x2="66" y2="118.8" class="solid"></line>
+  <text x="69.96" y="113.520004" >,</text>
+  <text x="22.44" y="124.08" >G</text>
+  <rect x="26.400002" y="118.8" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="118.8" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="124.08" x2="34.32" y2="126.72" class="solid"></line>
+  <text x="38.280003" y="124.08" >i,,G</text>
+  <rect x="58.08" y="118.8" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="124.08" x2="60.72" y2="129.36" class="solid"></line>
+  <rect x="63.36" y="118.8" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="66" y1="124.08" x2="66" y2="129.36" class="solid"></line>
+  <text x="69.96" y="124.08" >,</text>
+  <text x="11.88" y="134.64" >:K#K:</text>
+  <text x="54.120003" y="134.64" >L</text>
+  <rect x="58.08" y="129.36" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="60.72" y1="134.64" x2="60.72" y2="139.92" class="solid"></line>
+  <rect x="63.36" y="129.36" width="5.279999" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="66" y1="134.64" x2="66" y2="139.92" class="solid"></line>
+  <text x="69.96" y="134.64" >,</text>
+  <text x="6.6000004" y="145.20001" >;</text>
+  <line x1="13.200001" y1="137.28" x2="13.200001" y2="139.92" class="solid"></line>
+  <rect x="10.56" y="139.92" width="5.2799997" height="5.280014" class="solid filled" rx="0"></rect>
+  <rect x="15.84" y="139.92" width="5.2800007" height="5.280014" class="solid filled" rx="0"></rect>
+  <text x="22.44" y="145.20001" >D.</text>
+  <text x="54.120003" y="145.20001" >L</text>
+  <rect x="58.08" y="139.92" width="5.279999" height="5.280014" class="solid filled" rx="0"></rect>
+  <rect x="63.36" y="139.92" width="5.279999" height="5.280014" class="solid filled" rx="0"></rect>
+  <text x="69.96" y="145.20001" >,</text>
+  <text x="6.6000004" y="155.76001" >,,,</text>
+  <text x="54.120003" y="155.76001" >.,,</text>
+</svg>
diff --git a/db/jave/fill/filter.flf b/static/db/jave/fill/filter.flf
similarity index 100%
rename from db/jave/fill/filter.flf
rename to static/db/jave/fill/filter.flf
diff --git a/static/db/jave/fill/filter.svg b/static/db/jave/fill/filter.svg
new file mode 100644
index 0000000..e822986
--- /dev/null
+++ b/static/db/jave/fill/filter.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="52.800003" 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="47.52" height="52.800003"></rect>
+  <text x="1.32" y="7.92" >,8b.</text>
+  <text x="1.32" y="18.480001" >88&#39;8o</text>
+  <text x="1.32" y="29.04" >88PPY8.</text>
+  <text x="1.32" y="39.600002" >8b</text>
+  <text x="27.720001" y="39.600002" >`Y&#39;</text>
+</svg>
diff --git a/db/jave/fill/georgi16.flf b/static/db/jave/fill/georgi16.flf
similarity index 100%
rename from db/jave/fill/georgi16.flf
rename to static/db/jave/fill/georgi16.flf
diff --git a/static/db/jave/fill/georgi16.svg b/static/db/jave/fill/georgi16.svg
new file mode 100644
index 0000000..c283f16
--- /dev/null
+++ b/static/db/jave/fill/georgi16.svg
@@ -0,0 +1,120 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="147.84001" 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="79.200005" height="147.84001"></rect>
+  <line x1="36.960003" y1="31.68" x2="42.24" y2="31.68" class="solid"></line>
+  <text x="33" y="39.600002" >dM.</text>
+  <text x="27.720001" y="50.160004" >,MMb</text>
+  <text x="27.720001" y="60.72" >d&#39;YM.</text>
+  <text x="22.44" y="71.28001" >,P</text>
+  <text x="38.280003" y="71.28001" >`Mb</text>
+  <text x="22.44" y="81.840004" >d&#39;</text>
+  <text x="43.56" y="81.840004" >YM.</text>
+  <text x="17.16" y="92.4" >,P</text>
+  <text x="43.56" y="92.4" >`Mb</text>
+  <text x="17.16" y="102.96001" >d&#39;</text>
+  <text x="48.84" y="102.96001" >YM.</text>
+  <text x="11.88" y="113.520004" >,MMMMMMMMb</text>
+  <text x="11.88" y="124.08" >d&#39;</text>
+  <text x="54.120003" y="124.08" >YM.</text>
+  <line x1="0" y1="137.28" x2="5.28" y2="137.28" class="solid"></line>
+  <text x="6.6000004" y="134.64" >dM</text>
+  <line x1="15.84" y1="137.28" x2="21.12" y2="137.28" class="solid"></line>
+  <line x1="47.52" y1="137.28" x2="52.800003" y2="137.28" class="solid"></line>
+  <text x="54.120003" y="134.64" >dMM</text>
+  <line x1="68.64" y1="137.28" x2="73.920006" y2="137.28" class="solid"></line>
+</svg>
diff --git a/db/jave/fill/konto.flf b/static/db/jave/fill/konto.flf
similarity index 100%
rename from db/jave/fill/konto.flf
rename to static/db/jave/fill/konto.flf
diff --git a/static/db/jave/fill/konto.svg b/static/db/jave/fill/konto.svg
new file mode 100644
index 0000000..ee8c8c1
--- /dev/null
+++ b/static/db/jave/fill/konto.svg
@@ -0,0 +1,101 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="31.68" 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="21.12" height="31.68"></rect>
+  <text x="1.32" y="7.92" >.^.</text>
+  <text x="1.32" y="18.480001" >I^I</text>
+</svg>
diff --git a/db/jave/fill/kontoslant.flf b/static/db/jave/fill/kontoslant.flf
similarity index 100%
rename from db/jave/fill/kontoslant.flf
rename to static/db/jave/fill/kontoslant.flf
diff --git a/static/db/jave/fill/kontoslant.svg b/static/db/jave/fill/kontoslant.svg
new file mode 100644
index 0000000..87afe84
--- /dev/null
+++ b/static/db/jave/fill/kontoslant.svg
@@ -0,0 +1,102 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="31.68" 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="21.12" height="31.68"></rect>
+  <line x1="10.56" y1="0" x2="0" y2="21.12" class="solid"></line>
+  <line x1="10.56" y1="10.56" x2="5.28" y2="21.12" class="solid"></line>
+  <text x="11.88" y="7.92" >1</text>
+</svg>
diff --git a/db/jave/fill/nancyj-improved.flf b/static/db/jave/fill/nancyj-improved.flf
similarity index 100%
rename from db/jave/fill/nancyj-improved.flf
rename to static/db/jave/fill/nancyj-improved.flf
diff --git a/static/db/jave/fill/nancyj-improved.svg b/static/db/jave/fill/nancyj-improved.svg
new file mode 100644
index 0000000..ab72dcc
--- /dev/null
+++ b/static/db/jave/fill/nancyj-improved.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="73.920006" 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="58.08" height="73.920006"></rect>
+  <text x="6.6000004" y="7.92" >.d888888</text>
+  <text x="1.32" y="18.480001" >d8&#39;</text>
+  <text x="38.280003" y="18.480001" >88</text>
+  <text x="1.32" y="29.04" >88aaaaa88a</text>
+  <text x="1.32" y="39.600002" >88</text>
+  <text x="38.280003" y="39.600002" >88</text>
+  <text x="1.32" y="50.160004" >88</text>
+  <text x="38.280003" y="50.160004" >88</text>
+  <text x="1.32" y="60.72" >88</text>
+  <text x="38.280003" y="60.72" >88</text>
+</svg>
diff --git a/db/jave/fill/nscript.flf b/static/db/jave/fill/nscript.flf
similarity index 100%
rename from db/jave/fill/nscript.flf
rename to static/db/jave/fill/nscript.flf
diff --git a/static/db/jave/fill/nscript.svg b/static/db/jave/fill/nscript.svg
new file mode 100644
index 0000000..9976f52
--- /dev/null
+++ b/static/db/jave/fill/nscript.svg
@@ -0,0 +1,122 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100.32001" height="116.16" 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="100.32001" height="116.16"></rect>
+  <text x="59.4" y="7.92" >,ggg,</text>
+  <text x="54.120003" y="18.480001" >dP</text>
+  <text x="75.240005" y="18.480001" >8I</text>
+  <text x="48.84" y="29.04" >dP</text>
+  <text x="75.240005" y="29.04" >88</text>
+  <text x="43.56" y="39.600002" >dP</text>
+  <text x="75.240005" y="39.600002" >88</text>
+  <text x="38.280003" y="50.160004" >,8&#39;</text>
+  <text x="75.240005" y="50.160004" >88</text>
+  <text x="38.280003" y="60.72" >d88888888</text>
+  <line x1="5.28" y1="73.920006" x2="15.84" y2="73.920006" class="solid"></line>
+  <text x="33" y="71.28001" >,8&quot;</text>
+  <text x="75.240005" y="71.28001" >88</text>
+  <text x="1.32" y="81.840004" >dP&quot;</text>
+  <text x="27.720001" y="81.840004" >,8P</text>
+  <text x="75.240005" y="81.840004" >Y8</text>
+  <text x="1.32" y="92.4" >Yb,</text>
+  <line x1="15.84" y1="95.04" x2="21.12" y2="95.04" class="solid"></line>
+  <text x="22.44" y="92.4" >,dP</text>
+  <text x="75.240005" y="92.4" >`8b,</text>
+  <text x="80.520004" y="102.96001" >`Y8</text>
+  <text x="64.68" y="18.480001" ></text>
+  <text x="6.6000004" y="102.96001" >Y8P</text>
+</svg>
diff --git a/db/jave/fill/oldbanner.flf b/static/db/jave/fill/oldbanner.flf
similarity index 100%
rename from db/jave/fill/oldbanner.flf
rename to static/db/jave/fill/oldbanner.flf
diff --git a/static/db/jave/fill/oldbanner.svg b/static/db/jave/fill/oldbanner.svg
new file mode 100644
index 0000000..745f34e
--- /dev/null
+++ b/static/db/jave/fill/oldbanner.svg
@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="84.48" 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="42.24" height="84.48"></rect>
+  <text x="17.16" y="7.92" >#</text>
+  <text x="11.88" y="18.480001" >#</text>
+  <text x="22.44" y="18.480001" >#</text>
+  <text x="6.6000004" y="29.04" >#</text>
+  <text x="27.720001" y="29.04" >#</text>
+  <rect x="0" y="34.32" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="39.600002" x2="2.64" y2="44.88" class="solid"></line>
+  <rect x="31.68" y="34.32" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="39.600002" x2="34.32" y2="44.88" class="solid"></line>
+  <rect x="0" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="50.160004" x2="2.64" y2="55.440002" class="solid"></line>
+  <rect x="5.28" y="44.88" width="5.28" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="10.56" y="44.88" width="5.2799997" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="15.84" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="21.12" y="44.88" width="5.2800007" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="26.400002" y="44.88" width="5.279999" height="5.2800026" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="44.88" width="5.2800026" height="5.2800026" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="50.160004" x2="34.32" y2="55.440002" class="solid"></line>
+  <rect x="0" y="55.440002" width="5.28" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="2.64" y1="60.72" x2="2.64" y2="66" class="solid"></line>
+  <rect x="31.68" y="55.440002" width="5.2800026" height="5.279999" class="solid filled" rx="0"></rect>
+  <line x1="34.32" y1="60.72" x2="34.32" y2="66" class="solid"></line>
+  <rect x="0" y="66" width="5.28" height="5.2800064" class="solid filled" rx="0"></rect>
+  <rect x="31.68" y="66" width="5.2800026" height="5.2800064" class="solid filled" rx="0"></rect>
+</svg>
diff --git a/db/jave/fill/smpoison.flf b/static/db/jave/fill/smpoison.flf
similarity index 100%
rename from db/jave/fill/smpoison.flf
rename to static/db/jave/fill/smpoison.flf
diff --git a/static/db/jave/fill/smpoison.svg b/static/db/jave/fill/smpoison.svg
new file mode 100644
index 0000000..9eb0f4f
--- /dev/null
+++ b/static/db/jave/fill/smpoison.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="73.920006" 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="47.52" height="73.920006"></rect>
+  <text x="6.6000004" y="18.480001" >@@@@@@</text>
+  <text x="1.32" y="29.04" >@@!</text>
+  <text x="27.720001" y="29.04" >@@@</text>
+  <text x="1.32" y="39.600002" >@</text>
+  <line x1="7.92" y1="31.68" x2="7.92" y2="63.36" class="broken"></line>
+  <text x="11.88" y="39.600002" >@!@</text>
+  <line x1="29.04" y1="31.68" x2="29.04" y2="63.36" class="broken"></line>
+  <text x="33" y="39.600002" >@</text>
+  <line x1="39.600002" y1="31.68" x2="39.600002" y2="63.36" class="broken"></line>
+  <text x="1.32" y="50.160004" >!</text>
+  <text x="11.88" y="50.160004" >:</text>
+  <text x="33" y="50.160004" >!</text>
+</svg>
diff --git a/db/jave/fill/tengwar.flf b/static/db/jave/fill/tengwar.flf
similarity index 100%
rename from db/jave/fill/tengwar.flf
rename to static/db/jave/fill/tengwar.flf
diff --git a/static/db/jave/fill/tengwar.svg b/static/db/jave/fill/tengwar.svg
new file mode 100644
index 0000000..38efe94
--- /dev/null
+++ b/static/db/jave/fill/tengwar.svg
@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="84.48" 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="47.52" height="84.48"></rect>
+  <text x="17.16" y="7.92" >db</text>
+  <text x="1.32" y="18.480001" >db</text>
+  <text x="33" y="18.480001" >db</text>
+  <text x="11.88" y="39.600002" >&#39;Yb</text>
+  <text x="17.16" y="50.160004" >88</text>
+  <text x="17.16" y="60.72" >88</text>
+  <text x="11.88" y="71.28001" >.8P</text>
+</svg>
diff --git a/db/jave/fill/tiles.flf b/static/db/jave/fill/tiles.flf
similarity index 100%
rename from db/jave/fill/tiles.flf
rename to static/db/jave/fill/tiles.flf
diff --git a/static/db/jave/fill/tiles.svg b/static/db/jave/fill/tiles.svg
new file mode 100644
index 0000000..b7a812e
--- /dev/null
+++ b/static/db/jave/fill/tiles.svg
@@ -0,0 +1,112 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <text x="33" y="7.92" >[.</text>
+  <text x="27.720001" y="18.480001" >[.</text>
+  <text x="43.56" y="18.480001" >..</text>
+  <text x="22.44" y="29.04" >[.</text>
+  <text x="43.56" y="29.04" >[..</text>
+  <text x="17.16" y="39.600002" >[..</text>
+  <text x="48.84" y="39.600002" >[..</text>
+  <text x="11.88" y="50.160004" >[......</text>
+  <text x="54.120003" y="50.160004" >[..</text>
+  <text x="6.6000004" y="60.72" >[..</text>
+  <text x="59.4" y="60.72" >[..</text>
+  <text x="1.32" y="71.28001" >[..</text>
+  <text x="64.68" y="71.28001" >[..</text>
+</svg>
diff --git a/db/jave/frame/bear.flf b/static/db/jave/frame/bear.flf
similarity index 100%
rename from db/jave/frame/bear.flf
rename to static/db/jave/frame/bear.flf
diff --git a/db/jave/frame/cards.flf b/static/db/jave/frame/cards.flf
similarity index 100%
rename from db/jave/frame/cards.flf
rename to static/db/jave/frame/cards.flf
diff --git a/db/jave/frame/heart_left.flf b/static/db/jave/frame/heart_left.flf
similarity index 100%
rename from db/jave/frame/heart_left.flf
rename to static/db/jave/frame/heart_left.flf
diff --git a/db/jave/frame/heart_right.flf b/static/db/jave/frame/heart_right.flf
similarity index 100%
rename from db/jave/frame/heart_right.flf
rename to static/db/jave/frame/heart_right.flf
diff --git a/db/jave/frame/keyboard.flf b/static/db/jave/frame/keyboard.flf
similarity index 100%
rename from db/jave/frame/keyboard.flf
rename to static/db/jave/frame/keyboard.flf
diff --git a/db/jave/frame/puzzle.flf b/static/db/jave/frame/puzzle.flf
similarity index 100%
rename from db/jave/frame/puzzle.flf
rename to static/db/jave/frame/puzzle.flf
diff --git a/db/jave/non-latin/greek.flf b/static/db/jave/non-latin/greek.flf
similarity index 100%
rename from db/jave/non-latin/greek.flf
rename to static/db/jave/non-latin/greek.flf
diff --git a/db/jave/non-latin/jerusalem.flf b/static/db/jave/non-latin/jerusalem.flf
similarity index 100%
rename from db/jave/non-latin/jerusalem.flf
rename to static/db/jave/non-latin/jerusalem.flf
diff --git a/db/jave/non-latin/moscow.flf b/static/db/jave/non-latin/moscow.flf
similarity index 100%
rename from db/jave/non-latin/moscow.flf
rename to static/db/jave/non-latin/moscow.flf
diff --git a/db/jave/non-latin/mshebrew210.flf b/static/db/jave/non-latin/mshebrew210.flf
similarity index 100%
rename from db/jave/non-latin/mshebrew210.flf
rename to static/db/jave/non-latin/mshebrew210.flf
diff --git a/db/jave/non-latin/ntgreek.flf b/static/db/jave/non-latin/ntgreek.flf
similarity index 100%
rename from db/jave/non-latin/ntgreek.flf
rename to static/db/jave/non-latin/ntgreek.flf
diff --git a/db/jave/non-latin/runic.flf b/static/db/jave/non-latin/runic.flf
similarity index 100%
rename from db/jave/non-latin/runic.flf
rename to static/db/jave/non-latin/runic.flf
diff --git a/db/jave/non-latin/smtengwar.flf b/static/db/jave/non-latin/smtengwar.flf
similarity index 100%
rename from db/jave/non-latin/smtengwar.flf
rename to static/db/jave/non-latin/smtengwar.flf
diff --git a/db/jave/outline/amcrazo2.flf b/static/db/jave/outline/amcrazo2.flf
similarity index 100%
rename from db/jave/outline/amcrazo2.flf
rename to static/db/jave/outline/amcrazo2.flf
diff --git a/static/db/jave/outline/amcrazo2.svg b/static/db/jave/outline/amcrazo2.svg
new file mode 100644
index 0000000..0413d70
--- /dev/null
+++ b/static/db/jave/outline/amcrazo2.svg
@@ -0,0 +1,121 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="95.04" 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="52.800003" height="95.04"></rect>
+  <line x1="18.480001" y1="7.92" x2="18.480001" y2="84.48" class="solid"></line>
+  <line x1="29.04" y1="7.92" x2="29.04" y2="84.48" class="solid"></line>
+  <line x1="21.12" y1="14.52" x2="26.400002" y2="14.52" class="solid"></line>
+  <line x1="21.12" y1="17.16" x2="26.400002" y2="17.16" class="solid"></line>
+  <text x="33" y="18.480001" >`</text>
+  <line x1="21.12" y1="35.640003" x2="26.400002" y2="35.640003" class="solid"></line>
+  <line x1="21.12" y1="38.280003" x2="26.400002" y2="38.280003" class="solid"></line>
+  <text x="11.88" y="81.840004" >.</text>
+  <text x="33" y="81.840004" >..</text>
+  <g>
+    <path d="M 5.28,15.84 A 2.64,2.64 0,0,0 2.64,18.480001" class="nofill"></path>
+    <line x1="2.64" y1="18.480001" x2="2.64" y2="76.560005" class="solid"></line>
+    <line x1="5.28" y1="15.84" x2="13.200001" y2="15.84" class="solid"></line>
+    <path d="M 18.480001,10.56 A 5.28,5.28 0,0,1 13.200001,15.84" class="nofill"></path>
+    <path d="M 2.64,76.560005 A 2.64,2.64 0,0,0 5.28,79.200005" class="nofill"></path>
+    <line x1="5.28" y1="79.200005" x2="10.56" y2="79.200005" class="solid"></line>
+  </g>
+  <g>
+    <line x1="36.960003" y1="15.84" x2="42.24" y2="15.84" class="solid"></line>
+    <path d="M 42.24,15.84 A 2.64,2.64 0,0,1 44.88,18.480001" class="nofill"></path>
+    <line x1="44.88" y1="18.480001" x2="44.88" y2="84.48" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/outline/amcrazor.flf b/static/db/jave/outline/amcrazor.flf
similarity index 100%
rename from db/jave/outline/amcrazor.flf
rename to static/db/jave/outline/amcrazor.flf
diff --git a/static/db/jave/outline/amcrazor.svg b/static/db/jave/outline/amcrazor.svg
new file mode 100644
index 0000000..47aae71
--- /dev/null
+++ b/static/db/jave/outline/amcrazor.svg
@@ -0,0 +1,117 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63.36" height="73.920006" 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="63.36" height="73.920006"></rect>
+  <line x1="18.480001" y1="10.56" x2="2.64" y2="26.400002" class="broken"></line>
+  <text x="17.16" y="18.480001" >&#39;</text>
+  <line x1="26.400002" y1="14.52" x2="31.68" y2="14.52" class="solid"></line>
+  <line x1="26.400002" y1="17.16" x2="31.68" y2="17.16" class="solid"></line>
+  <text x="38.280003" y="18.480001" >`</text>
+  <line x1="39.600002" y1="10.56" x2="55.440002" y2="26.400002" class="broken"></line>
+  <line x1="26.400002" y1="35.640003" x2="31.68" y2="35.640003" class="solid"></line>
+  <line x1="26.400002" y1="38.280003" x2="31.68" y2="38.280003" class="solid"></line>
+  <g>
+    <line x1="23.76" y1="10.56" x2="23.76" y2="63.36" class="solid"></line>
+    <line x1="2.64" y1="29.04" x2="2.64" y2="63.36" class="solid"></line>
+    <line x1="2.64" y1="63.36" x2="23.76" y2="63.36" class="solid"></line>
+  </g>
+  <g>
+    <line x1="34.32" y1="10.56" x2="34.32" y2="63.36" class="solid"></line>
+    <line x1="55.440002" y1="29.04" x2="55.440002" y2="63.36" class="solid"></line>
+    <line x1="34.32" y1="63.36" x2="55.440002" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/outline/amcthin.flf b/static/db/jave/outline/amcthin.flf
similarity index 100%
rename from db/jave/outline/amcthin.flf
rename to static/db/jave/outline/amcthin.flf
diff --git a/static/db/jave/outline/amcthin.svg b/static/db/jave/outline/amcthin.svg
new file mode 100644
index 0000000..097e141
--- /dev/null
+++ b/static/db/jave/outline/amcthin.svg
@@ -0,0 +1,109 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="73.920006" 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="52.800003" height="73.920006"></rect>
+  <rect x="2.64" y="5.28" width="10.56" height="52.800003" class="solid nofill" rx="2.64"></rect>
+  <rect x="34.32" y="5.28" width="10.560001" height="52.800003" class="solid nofill" rx="2.64"></rect>
+  <text x="17.16" y="7.92" >.</text>
+  <line x1="21.12" y1="5.28" x2="26.400002" y2="5.28" class="solid"></line>
+  <text x="27.720001" y="7.92" >.</text>
+  <line x1="21.12" y1="15.84" x2="26.400002" y2="15.84" class="broken"></line>
+  <text x="17.16" y="29.04" >.</text>
+  <line x1="21.12" y1="26.400002" x2="26.400002" y2="26.400002" class="solid"></line>
+  <text x="27.720001" y="29.04" >.</text>
+  <line x1="21.12" y1="36.960003" x2="26.400002" y2="36.960003" class="broken"></line>
+</svg>
diff --git a/db/jave/outline/amcun1.flf b/static/db/jave/outline/amcun1.flf
similarity index 100%
rename from db/jave/outline/amcun1.flf
rename to static/db/jave/outline/amcun1.flf
diff --git a/static/db/jave/outline/amcun1.svg b/static/db/jave/outline/amcun1.svg
new file mode 100644
index 0000000..1189562
--- /dev/null
+++ b/static/db/jave/outline/amcun1.svg
@@ -0,0 +1,119 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="84.48" 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="52.800003" height="84.48"></rect>
+  <text x="1.32" y="7.92" >,&#39;&#39;,,&#39;&#39;&#39;,</text>
+  <text x="1.32" y="18.480001" >;</text>
+  <text x="17.16" y="18.480001" >;&#39;,</text>
+  <text x="43.56" y="18.480001" >;</text>
+  <text x="1.32" y="29.04" >;</text>
+  <text x="17.16" y="29.04" >;,&#39;</text>
+  <text x="43.56" y="29.04" >;</text>
+  <text x="1.32" y="39.600002" >;</text>
+  <text x="17.16" y="39.600002" >;&#39;,</text>
+  <text x="43.56" y="39.600002" >;</text>
+  <text x="1.32" y="50.160004" >;</text>
+  <text x="17.16" y="50.160004" >;</text>
+  <text x="27.720001" y="50.160004" >;</text>
+  <text x="43.56" y="50.160004" >;</text>
+  <text x="1.32" y="60.72" >;</text>
+  <text x="17.16" y="60.72" >;</text>
+  <text x="27.720001" y="60.72" >;</text>
+  <text x="43.56" y="60.72" >;</text>
+  <text x="1.32" y="71.28001" >&#39;,,&#39;</text>
+  <text x="27.720001" y="71.28001" >&#39;,,&#39;</text>
+</svg>
diff --git a/db/jave/outline/broadway_kb.flf b/static/db/jave/outline/broadway_kb.flf
similarity index 100%
rename from db/jave/outline/broadway_kb.flf
rename to static/db/jave/outline/broadway_kb.flf
diff --git a/static/db/jave/outline/broadway_kb.svg b/static/db/jave/outline/broadway_kb.svg
new file mode 100644
index 0000000..e7bd8f0
--- /dev/null
+++ b/static/db/jave/outline/broadway_kb.svg
@@ -0,0 +1,107 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36.960003" height="42.24" 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="36.960003" height="42.24"></rect>
+  <g>
+    <line x1="10.56" y1="10.56" x2="21.12" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="0" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="31.68" y2="31.68" class="solid"></line>
+    <line x1="0" y1="31.68" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="13.200001" y1="26.400002" x2="29.04" y2="26.400002" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/outline/doubleshorts.flf b/static/db/jave/outline/doubleshorts.flf
similarity index 100%
rename from db/jave/outline/doubleshorts.flf
rename to static/db/jave/outline/doubleshorts.flf
diff --git a/static/db/jave/outline/doubleshorts.svg b/static/db/jave/outline/doubleshorts.svg
new file mode 100644
index 0000000..1d3b873
--- /dev/null
+++ b/static/db/jave/outline/doubleshorts.svg
@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="42.24" 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="31.68" height="42.24"></rect>
+  <line x1="10.56" y1="14.52" x2="15.84" y2="14.52" class="solid"></line>
+  <line x1="10.56" y1="17.16" x2="15.84" y2="17.16" class="solid"></line>
+  <g>
+    <line x1="2.64" y1="10.56" x2="23.76" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="10.56" x2="2.64" y2="31.68" class="solid"></line>
+    <line x1="7.92" y1="10.56" x2="7.92" y2="31.68" class="solid"></line>
+    <line x1="18.480001" y1="10.56" x2="18.480001" y2="31.68" class="solid"></line>
+    <line x1="23.76" y1="10.56" x2="23.76" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/pattern/arrows.flf b/static/db/jave/pattern/arrows.flf
similarity index 100%
rename from db/jave/pattern/arrows.flf
rename to static/db/jave/pattern/arrows.flf
diff --git a/static/db/jave/pattern/arrows.svg b/static/db/jave/pattern/arrows.svg
new file mode 100644
index 0000000..d18e8c4
--- /dev/null
+++ b/static/db/jave/pattern/arrows.svg
@@ -0,0 +1,144 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="84.48" 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="79.200005" height="84.48"></rect>
+  <text x="33" y="7.92" >&gt;</text>
+  <polygon points="36.960003,2.64 42.24,5.28 36.960003,7.92" class="filled"></polygon>
+  <text x="27.720001" y="18.480001" >&gt;</text>
+  <polygon points="31.68,13.200001 36.960003,15.84 31.68,18.480001" class="filled"></polygon>
+  <line x1="36.960003" y1="14.52" x2="42.24" y2="14.52" class="solid"></line>
+  <line x1="36.960003" y1="17.16" x2="42.24" y2="17.16" class="solid"></line>
+  <text x="43.56" y="18.480001" >&gt;</text>
+  <text x="22.44" y="29.04" >&gt;</text>
+  <polygon points="26.400002,23.76 31.68,26.400002 26.400002,29.04" class="filled"></polygon>
+  <text x="38.280003" y="29.04" >&gt;</text>
+  <line x1="42.24" y1="25.080002" x2="47.52" y2="25.080002" class="solid"></line>
+  <line x1="42.24" y1="27.720001" x2="47.52" y2="27.720001" class="solid"></line>
+  <text x="48.84" y="29.04" >&gt;</text>
+  <text x="17.16" y="39.600002" >&gt;</text>
+  <line x1="21.12" y1="35.640003" x2="26.400002" y2="35.640003" class="solid"></line>
+  <line x1="21.12" y1="38.280003" x2="26.400002" y2="38.280003" class="solid"></line>
+  <text x="27.720001" y="39.600002" >&gt;</text>
+  <text x="43.56" y="39.600002" >&gt;</text>
+  <line x1="47.52" y1="35.640003" x2="52.800003" y2="35.640003" class="solid"></line>
+  <line x1="47.52" y1="38.280003" x2="52.800003" y2="38.280003" class="solid"></line>
+  <text x="54.120003" y="39.600002" >&gt;</text>
+  <text x="11.88" y="50.160004" >&gt;</text>
+  <line x1="15.84" y1="46.2" x2="42.24" y2="46.2" class="solid"></line>
+  <line x1="15.84" y1="48.84" x2="42.24" y2="48.84" class="solid"></line>
+  <text x="43.56" y="50.160004" >&gt;</text>
+  <polygon points="47.52,44.88 52.800003,47.52 47.52,50.160004" class="filled"></polygon>
+  <line x1="52.800003" y1="46.2" x2="58.08" y2="46.2" class="solid"></line>
+  <line x1="52.800003" y1="48.84" x2="58.08" y2="48.84" class="solid"></line>
+  <text x="59.4" y="50.160004" >&gt;</text>
+  <text x="6.6000004" y="60.72" >&gt;</text>
+  <line x1="10.56" y1="56.760002" x2="15.84" y2="56.760002" class="solid"></line>
+  <line x1="10.56" y1="59.4" x2="15.84" y2="59.4" class="solid"></line>
+  <text x="17.16" y="60.72" >&gt;</text>
+  <text x="54.120003" y="60.72" >&gt;</text>
+  <line x1="58.08" y1="56.760002" x2="63.36" y2="56.760002" class="solid"></line>
+  <line x1="58.08" y1="59.4" x2="63.36" y2="59.4" class="solid"></line>
+  <text x="64.68" y="60.72" >&gt;</text>
+  <text x="1.32" y="71.28001" >&gt;</text>
+  <line x1="5.28" y1="67.32" x2="10.56" y2="67.32" class="solid"></line>
+  <line x1="5.28" y1="69.96" x2="10.56" y2="69.96" class="solid"></line>
+  <text x="11.88" y="71.28001" >&gt;</text>
+  <text x="59.4" y="71.28001" >&gt;</text>
+  <line x1="63.36" y1="67.32" x2="68.64" y2="67.32" class="solid"></line>
+  <line x1="63.36" y1="69.96" x2="68.64" y2="69.96" class="solid"></line>
+  <text x="69.96" y="71.28001" >&gt;</text>
+</svg>
diff --git a/db/jave/pattern/peaksslant.flf b/static/db/jave/pattern/peaksslant.flf
similarity index 100%
rename from db/jave/pattern/peaksslant.flf
rename to static/db/jave/pattern/peaksslant.flf
diff --git a/static/db/jave/pattern/peaksslant.svg b/static/db/jave/pattern/peaksslant.svg
new file mode 100644
index 0000000..9b10eec
--- /dev/null
+++ b/static/db/jave/pattern/peaksslant.svg
@@ -0,0 +1,132 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="105.600006" height="73.920006" 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="105.600006" height="73.920006"></rect>
+  <line x1="0" y1="63.36" x2="73.920006" y2="63.36" class="solid"></line>
+  <g>
+    <line x1="26.400002" y1="10.56" x2="52.800003" y2="10.56" class="solid"></line>
+    <line x1="58.08" y1="0" x2="47.52" y2="21.12" class="solid"></line>
+    <line x1="58.08" y1="0" x2="79.200005" y2="42.24" class="solid"></line>
+    <line x1="79.200005" y1="42.24" x2="84.48" y2="42.24" class="solid"></line>
+    <line x1="68.64" y1="0" x2="58.08" y2="21.12" class="solid"></line>
+    <line x1="68.64" y1="0" x2="84.48" y2="31.68" class="solid"></line>
+    <line x1="73.920006" y1="10.56" x2="100.32001" y2="10.56" class="solid"></line>
+    <line x1="52.800003" y1="10.56" x2="58.08" y2="21.12" class="solid"></line>
+    <line x1="73.920006" y1="10.56" x2="52.800003" y2="52.800003" class="solid"></line>
+    <line x1="79.200005" y1="21.12" x2="95.04" y2="21.12" class="solid"></line>
+    <line x1="79.200005" y1="21.12" x2="63.36" y2="52.800003" class="solid"></line>
+    <line x1="84.48" y1="31.68" x2="89.76" y2="31.68" class="solid"></line>
+    <line x1="21.12" y1="21.12" x2="36.960003" y2="21.12" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="10.56" x2="47.52" y2="21.12" class="solid"></line>
+    <line x1="36.960003" y1="21.12" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="42.24" y1="31.68" x2="63.36" y2="31.68" class="solid"></line>
+    <line x1="52.800003" y1="31.68" x2="47.52" y2="42.24" class="solid"></line>
+    <line x1="52.800003" y1="31.68" x2="63.36" y2="52.800003" class="solid"></line>
+    <line x1="63.36" y1="31.68" x2="73.920006" y2="52.800003" class="solid"></line>
+    <line x1="73.920006" y1="52.800003" x2="79.200005" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="10.56" y1="42.24" x2="15.84" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="42.24" y1="31.68" x2="36.960003" y2="42.24" class="solid"></line>
+    <line x1="5.28" y1="52.800003" x2="10.56" y2="52.800003" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="21.12" y2="52.800003" class="solid"></line>
+    <line x1="31.68" y1="52.800003" x2="52.800003" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/pattern/reverse.flf b/static/db/jave/pattern/reverse.flf
similarity index 100%
rename from db/jave/pattern/reverse.flf
rename to static/db/jave/pattern/reverse.flf
diff --git a/static/db/jave/pattern/reverse.svg b/static/db/jave/pattern/reverse.svg
new file mode 100644
index 0000000..fe1d640
--- /dev/null
+++ b/static/db/jave/pattern/reverse.svg
@@ -0,0 +1,151 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.08" height="126.72" 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="58.08" height="126.72"></rect>
+  <line x1="0" y1="3.96" x2="52.800003" y2="3.96" class="solid"></line>
+  <line x1="0" y1="6.6000004" x2="52.800003" y2="6.6000004" class="solid"></line>
+  <line x1="0" y1="14.52" x2="21.12" y2="14.52" class="solid"></line>
+  <line x1="0" y1="17.16" x2="21.12" y2="17.16" class="solid"></line>
+  <line x1="31.68" y1="14.52" x2="52.800003" y2="14.52" class="solid"></line>
+  <line x1="31.68" y1="17.16" x2="52.800003" y2="17.16" class="solid"></line>
+  <line x1="0" y1="25.080002" x2="15.84" y2="25.080002" class="solid"></line>
+  <line x1="0" y1="27.720001" x2="15.84" y2="27.720001" class="solid"></line>
+  <line x1="36.960003" y1="25.080002" x2="52.800003" y2="25.080002" class="solid"></line>
+  <line x1="36.960003" y1="27.720001" x2="52.800003" y2="27.720001" class="solid"></line>
+  <line x1="0" y1="35.640003" x2="10.56" y2="35.640003" class="solid"></line>
+  <line x1="0" y1="38.280003" x2="10.56" y2="38.280003" class="solid"></line>
+  <line x1="42.24" y1="35.640003" x2="52.800003" y2="35.640003" class="solid"></line>
+  <line x1="42.24" y1="38.280003" x2="52.800003" y2="38.280003" class="solid"></line>
+  <line x1="0" y1="46.2" x2="5.28" y2="46.2" class="solid"></line>
+  <line x1="0" y1="48.84" x2="5.28" y2="48.84" class="solid"></line>
+  <line x1="47.52" y1="46.2" x2="52.800003" y2="46.2" class="solid"></line>
+  <line x1="47.52" y1="48.84" x2="52.800003" y2="48.84" class="solid"></line>
+  <line x1="0" y1="56.760002" x2="5.28" y2="56.760002" class="solid"></line>
+  <line x1="0" y1="59.4" x2="5.28" y2="59.4" class="solid"></line>
+  <line x1="47.52" y1="56.760002" x2="52.800003" y2="56.760002" class="solid"></line>
+  <line x1="47.52" y1="59.4" x2="52.800003" y2="59.4" class="solid"></line>
+  <line x1="0" y1="67.32" x2="5.28" y2="67.32" class="solid"></line>
+  <line x1="0" y1="69.96" x2="5.28" y2="69.96" class="solid"></line>
+  <line x1="47.52" y1="67.32" x2="52.800003" y2="67.32" class="solid"></line>
+  <line x1="47.52" y1="69.96" x2="52.800003" y2="69.96" class="solid"></line>
+  <line x1="0" y1="77.880005" x2="5.28" y2="77.880005" class="solid"></line>
+  <line x1="0" y1="80.520004" x2="5.28" y2="80.520004" class="solid"></line>
+  <line x1="15.84" y1="77.880005" x2="36.960003" y2="77.880005" class="solid"></line>
+  <line x1="15.84" y1="80.520004" x2="36.960003" y2="80.520004" class="solid"></line>
+  <line x1="47.52" y1="77.880005" x2="52.800003" y2="77.880005" class="solid"></line>
+  <line x1="47.52" y1="80.520004" x2="52.800003" y2="80.520004" class="solid"></line>
+  <line x1="0" y1="88.44" x2="5.28" y2="88.44" class="solid"></line>
+  <line x1="0" y1="91.08" x2="5.28" y2="91.08" class="solid"></line>
+  <line x1="15.84" y1="88.44" x2="36.960003" y2="88.44" class="solid"></line>
+  <line x1="15.84" y1="91.08" x2="36.960003" y2="91.08" class="solid"></line>
+  <line x1="47.52" y1="88.44" x2="52.800003" y2="88.44" class="solid"></line>
+  <line x1="47.52" y1="91.08" x2="52.800003" y2="91.08" class="solid"></line>
+  <line x1="0" y1="99.00001" x2="5.28" y2="99.00001" class="solid"></line>
+  <line x1="0" y1="101.64001" x2="5.28" y2="101.64001" class="solid"></line>
+  <line x1="15.84" y1="99.00001" x2="36.960003" y2="99.00001" class="solid"></line>
+  <line x1="15.84" y1="101.64001" x2="36.960003" y2="101.64001" class="solid"></line>
+  <line x1="47.52" y1="99.00001" x2="52.800003" y2="99.00001" class="solid"></line>
+  <line x1="47.52" y1="101.64001" x2="52.800003" y2="101.64001" class="solid"></line>
+  <line x1="0" y1="109.560005" x2="52.800003" y2="109.560005" class="solid"></line>
+  <line x1="0" y1="112.200005" x2="52.800003" y2="112.200005" class="solid"></line>
+  <line x1="21.12" y1="35.640003" x2="31.68" y2="35.640003" class="solid"></line>
+  <line x1="21.12" y1="38.280003" x2="31.68" y2="38.280003" class="solid"></line>
+  <line x1="15.84" y1="46.2" x2="36.960003" y2="46.2" class="solid"></line>
+  <line x1="15.84" y1="48.84" x2="36.960003" y2="48.84" class="solid"></line>
+  <line x1="15.84" y1="56.760002" x2="36.960003" y2="56.760002" class="solid"></line>
+  <line x1="15.84" y1="59.4" x2="36.960003" y2="59.4" class="solid"></line>
+</svg>
diff --git a/db/jave/pattern/s-relief.flf b/static/db/jave/pattern/s-relief.flf
similarity index 100%
rename from db/jave/pattern/s-relief.flf
rename to static/db/jave/pattern/s-relief.flf
diff --git a/static/db/jave/pattern/s-relief.svg b/static/db/jave/pattern/s-relief.svg
new file mode 100644
index 0000000..0f7403e
--- /dev/null
+++ b/static/db/jave/pattern/s-relief.svg
@@ -0,0 +1,201 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="147.84001" height="105.600006" 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="147.84001" height="105.600006"></rect>
+  <g>
+    <line x1="0" y1="10.56" x2="26.400002" y2="10.56" class="solid"></line>
+    <line x1="31.68" y1="0" x2="21.12" y2="21.12" class="solid"></line>
+    <line x1="31.68" y1="0" x2="42.24" y2="21.12" class="solid"></line>
+    <line x1="5.28" y1="21.12" x2="21.12" y2="21.12" class="solid"></line>
+    <line x1="26.400002" y1="10.56" x2="63.36" y2="84.48" class="solid"></line>
+    <line x1="63.36" y1="84.48" x2="58.08" y2="95.04" class="solid"></line>
+  </g>
+  <g>
+    <line x1="36.960003" y1="0" x2="47.52" y2="21.12" class="solid"></line>
+    <line x1="73.920006" y1="0" x2="84.48" y2="21.12" class="solid"></line>
+    <line x1="79.200005" y1="10.56" x2="100.32001" y2="10.56" class="solid"></line>
+    <line x1="84.48" y1="10.56" x2="121.44" y2="84.48" class="solid"></line>
+    <line x1="89.76" y1="10.56" x2="126.72" y2="84.48" class="solid"></line>
+    <line x1="95.04" y1="21.12" x2="105.600006" y2="21.12" class="solid"></line>
+    <line x1="84.48" y1="21.12" x2="79.200005" y2="31.68" class="solid"></line>
+    <line x1="89.76" y1="21.12" x2="84.48" y2="31.68" class="solid"></line>
+    <line x1="100.32001" y1="21.12" x2="132" y2="84.48" class="solid"></line>
+    <line x1="105.600006" y1="31.68" x2="110.880005" y2="31.68" class="solid"></line>
+    <line x1="110.880005" y1="42.24" x2="116.16" y2="42.24" class="solid"></line>
+    <line x1="116.16" y1="52.800003" x2="121.44" y2="52.800003" class="solid"></line>
+    <line x1="105.600006" y1="52.800003" x2="100.32001" y2="63.36" class="solid"></line>
+    <line x1="121.44" y1="63.36" x2="126.72" y2="63.36" class="solid"></line>
+    <line x1="126.72" y1="73.920006" x2="132" y2="73.920006" class="solid"></line>
+    <line x1="132" y1="84.48" x2="137.28" y2="84.48" class="solid"></line>
+    <line x1="126.72" y1="84.48" x2="121.44" y2="95.04" class="solid"></line>
+    <line x1="132" y1="84.48" x2="126.72" y2="95.04" class="solid"></line>
+    <line x1="126.72" y1="95.04" x2="142.56001" y2="95.04" class="solid"></line>
+    <line x1="31.68" y1="10.56" x2="68.64" y2="84.48" class="solid"></line>
+    <line x1="47.52" y1="21.12" x2="42.24" y2="31.68" class="solid"></line>
+    <line x1="47.52" y1="42.24" x2="89.76" y2="42.24" class="solid"></line>
+    <line x1="84.48" y1="31.68" x2="95.04" y2="52.800003" class="solid"></line>
+    <line x1="95.04" y1="31.68" x2="89.76" y2="42.24" class="solid"></line>
+    <line x1="52.800003" y1="42.24" x2="58.08" y2="52.800003" class="solid"></line>
+    <line x1="58.08" y1="42.24" x2="63.36" y2="52.800003" class="solid"></line>
+    <line x1="63.36" y1="42.24" x2="68.64" y2="52.800003" class="solid"></line>
+    <line x1="68.64" y1="42.24" x2="73.920006" y2="52.800003" class="solid"></line>
+    <line x1="73.920006" y1="42.24" x2="79.200005" y2="52.800003" class="solid"></line>
+    <line x1="79.200005" y1="42.24" x2="84.48" y2="52.800003" class="solid"></line>
+    <line x1="84.48" y1="42.24" x2="89.76" y2="52.800003" class="solid"></line>
+    <line x1="63.36" y1="52.800003" x2="58.08" y2="63.36" class="solid"></line>
+    <line x1="68.64" y1="52.800003" x2="63.36" y2="63.36" class="solid"></line>
+    <line x1="73.920006" y1="52.800003" x2="68.64" y2="63.36" class="solid"></line>
+    <line x1="79.200005" y1="52.800003" x2="73.920006" y2="63.36" class="solid"></line>
+    <line x1="84.48" y1="52.800003" x2="79.200005" y2="63.36" class="solid"></line>
+    <line x1="89.76" y1="52.800003" x2="84.48" y2="63.36" class="solid"></line>
+    <line x1="95.04" y1="52.800003" x2="89.76" y2="63.36" class="solid"></line>
+    <line x1="63.36" y1="73.920006" x2="105.600006" y2="73.920006" class="solid"></line>
+    <line x1="100.32001" y1="63.36" x2="116.16" y2="95.04" class="solid"></line>
+    <line x1="110.880005" y1="63.36" x2="105.600006" y2="73.920006" class="solid"></line>
+    <line x1="68.64" y1="84.48" x2="110.880005" y2="84.48" class="solid"></line>
+    <line x1="116.16" y1="73.920006" x2="110.880005" y2="84.48" class="solid"></line>
+    <line x1="68.64" y1="84.48" x2="63.36" y2="95.04" class="solid"></line>
+    <line x1="63.36" y1="95.04" x2="116.16" y2="95.04" class="solid"></line>
+    <line x1="121.44" y1="84.48" x2="116.16" y2="95.04" class="solid"></line>
+  </g>
+  <g>
+    <line x1="42.24" y1="0" x2="52.800003" y2="21.12" class="solid"></line>
+    <line x1="52.800003" y1="21.12" x2="47.52" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="47.52" y1="0" x2="58.08" y2="21.12" class="solid"></line>
+    <line x1="58.08" y1="21.12" x2="52.800003" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="52.800003" y1="0" x2="63.36" y2="21.12" class="solid"></line>
+    <line x1="63.36" y1="21.12" x2="58.08" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="58.08" y1="0" x2="68.64" y2="21.12" class="solid"></line>
+    <line x1="68.64" y1="21.12" x2="63.36" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="63.36" y1="0" x2="73.920006" y2="21.12" class="solid"></line>
+    <line x1="73.920006" y1="21.12" x2="68.64" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="68.64" y1="0" x2="79.200005" y2="21.12" class="solid"></line>
+    <line x1="79.200005" y1="21.12" x2="73.920006" y2="31.68" class="solid"></line>
+  </g>
+  <g>
+    <line x1="10.56" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="26.400002" y1="21.12" x2="58.08" y2="84.48" class="solid"></line>
+    <line x1="15.84" y1="42.24" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="31.68" x2="52.800003" y2="95.04" class="solid"></line>
+    <line x1="31.68" y1="31.68" x2="26.400002" y2="42.24" class="solid"></line>
+    <line x1="21.12" y1="52.800003" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="36.960003" y1="42.24" x2="31.68" y2="52.800003" class="solid"></line>
+    <line x1="26.400002" y1="63.36" x2="36.960003" y2="63.36" class="solid"></line>
+    <line x1="42.24" y1="52.800003" x2="36.960003" y2="63.36" class="solid"></line>
+    <line x1="31.68" y1="73.920006" x2="42.24" y2="73.920006" class="solid"></line>
+    <line x1="47.52" y1="63.36" x2="42.24" y2="73.920006" class="solid"></line>
+    <line x1="36.960003" y1="84.48" x2="47.52" y2="84.48" class="solid"></line>
+    <line x1="52.800003" y1="73.920006" x2="47.52" y2="84.48" class="solid"></line>
+    <line x1="42.24" y1="95.04" x2="52.800003" y2="95.04" class="solid"></line>
+    <line x1="58.08" y1="84.48" x2="52.800003" y2="95.04" class="solid"></line>
+  </g>
+  <g>
+    <line x1="95.04" y1="42.24" x2="100.32001" y2="52.800003" class="solid"></line>
+    <line x1="100.32001" y1="52.800003" x2="95.04" y2="63.36" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/pattern/starstrips.flf b/static/db/jave/pattern/starstrips.flf
similarity index 100%
rename from db/jave/pattern/starstrips.flf
rename to static/db/jave/pattern/starstrips.flf
diff --git a/static/db/jave/pattern/starstrips.svg b/static/db/jave/pattern/starstrips.svg
new file mode 100644
index 0000000..5133c61
--- /dev/null
+++ b/static/db/jave/pattern/starstrips.svg
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="68.64" height="95.04" 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="68.64" height="95.04"></rect>
+  <line x1="15.84" y1="5.28" x2="47.52" y2="5.28" class="solid"></line>
+  <line x1="13.200001" y1="15.84" x2="50.160004" y2="15.84" class="solid"></line>
+  <line x1="5.28" y1="26.400002" x2="58.08" y2="26.400002" class="solid"></line>
+  <line x1="2.64" y1="36.960003" x2="18.480001" y2="36.960003" class="solid"></line>
+  <line x1="44.88" y1="36.960003" x2="60.72" y2="36.960003" class="solid"></line>
+  <line x1="0" y1="47.52" x2="63.36" y2="47.52" class="solid"></line>
+  <line x1="2.64" y1="58.08" x2="60.72" y2="58.08" class="solid"></line>
+  <line x1="0" y1="68.64" x2="21.12" y2="68.64" class="solid"></line>
+  <line x1="42.24" y1="68.64" x2="63.36" y2="68.64" class="solid"></line>
+  <line x1="2.64" y1="79.200005" x2="18.480001" y2="79.200005" class="solid"></line>
+  <line x1="44.88" y1="79.200005" x2="60.72" y2="79.200005" class="solid"></line>
+</svg>
diff --git a/db/jave/pattern/tubular.flf b/static/db/jave/pattern/tubular.flf
similarity index 100%
rename from db/jave/pattern/tubular.flf
rename to static/db/jave/pattern/tubular.flf
diff --git a/static/db/jave/pattern/tubular.svg b/static/db/jave/pattern/tubular.svg
new file mode 100644
index 0000000..773d6f9
--- /dev/null
+++ b/static/db/jave/pattern/tubular.svg
@@ -0,0 +1,121 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="84.48" 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="84.48" height="84.48"></rect>
+  <line x1="42.24" y1="5.28" x2="34.32" y2="5.28" class="broken end_marked_big_open_circle"></line>
+  <line x1="36.960003" y1="15.84" x2="29.04" y2="15.84" class="broken end_marked_big_open_circle"></line>
+  <line x1="42.24" y1="15.84" x2="52.800003" y2="15.84" class="broken"></line>
+  <line x1="31.68" y1="26.400002" x2="23.76" y2="26.400002" class="broken end_marked_big_open_circle"></line>
+  <line x1="52.800003" y1="26.400002" x2="44.88" y2="26.400002" class="broken end_marked_big_open_circle"></line>
+  <line x1="52.800003" y1="26.400002" x2="58.08" y2="26.400002" class="broken"></line>
+  <line x1="26.400002" y1="36.960003" x2="18.480001" y2="36.960003" class="broken end_marked_big_open_circle"></line>
+  <line x1="26.400002" y1="36.960003" x2="31.68" y2="36.960003" class="broken"></line>
+  <line x1="58.08" y1="36.960003" x2="50.160004" y2="36.960003" class="broken end_marked_big_open_circle"></line>
+  <line x1="58.08" y1="36.960003" x2="63.36" y2="36.960003" class="broken"></line>
+  <line x1="21.12" y1="47.52" x2="13.200001" y2="47.52" class="broken end_marked_big_open_circle"></line>
+  <line x1="21.12" y1="47.52" x2="47.52" y2="47.52" class="broken"></line>
+  <line x1="63.36" y1="47.52" x2="55.440002" y2="47.52" class="broken end_marked_big_open_circle"></line>
+  <line x1="63.36" y1="47.52" x2="68.64" y2="47.52" class="broken"></line>
+  <line x1="15.84" y1="58.08" x2="7.92" y2="58.08" class="broken end_marked_big_open_circle"></line>
+  <line x1="15.84" y1="58.08" x2="21.12" y2="58.08" class="broken"></line>
+  <line x1="68.64" y1="58.08" x2="60.72" y2="58.08" class="broken end_marked_big_open_circle"></line>
+  <line x1="68.64" y1="58.08" x2="73.920006" y2="58.08" class="broken"></line>
+  <line x1="10.56" y1="68.64" x2="2.64" y2="68.64" class="broken end_marked_big_open_circle"></line>
+  <line x1="10.56" y1="68.64" x2="15.84" y2="68.64" class="broken"></line>
+  <line x1="73.920006" y1="68.64" x2="66" y2="68.64" class="broken end_marked_big_open_circle"></line>
+  <line x1="73.920006" y1="68.64" x2="79.200005" y2="68.64" class="broken"></line>
+</svg>
diff --git a/db/jave/script/cola.flf b/static/db/jave/script/cola.flf
similarity index 100%
rename from db/jave/script/cola.flf
rename to static/db/jave/script/cola.flf
diff --git a/static/db/jave/script/cola.svg b/static/db/jave/script/cola.svg
new file mode 100644
index 0000000..734a326
--- /dev/null
+++ b/static/db/jave/script/cola.svg
@@ -0,0 +1,124 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="73.920006" 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="79.200005" height="73.920006"></rect>
+  <text x="69.96" y="29.04" >.</text>
+  <text x="38.280003" y="39.600002" >.</text>
+  <line x1="42.24" y1="42.24" x2="63.36" y2="42.24" class="solid"></line>
+  <text x="64.68" y="39.600002" >.&#39;</text>
+  <text x="11.88" y="50.160004" >:&#39;</text>
+  <text x="17.16" y="60.72" >.</text>
+  <text x="64.68" y="60.72" >&#39;</text>
+  <g>
+    <line x1="52.800003" y1="0" x2="26.400002" y2="52.800003" class="solid"></line>
+    <line x1="52.800003" y1="0" x2="55.440002" y2="5.28" class="solid"></line>
+    <line x1="55.440002" y1="5.28" x2="55.440002" y2="55.440002" class="solid"></line>
+    <path d="M 55.440002,55.440002 A 2.64,2.64 0,0,0 58.08,58.08" class="nofill"></path>
+    <line x1="58.08" y1="58.08" x2="63.36" y2="58.08" class="solid"></line>
+    <path d="M 10.56,47.52 A 5.28,5.28 0,0,0 6.6000004,50.160004" class="nofill"></path>
+    <line x1="6.6000004" y1="50.160004" x2="5.28" y2="52.800003" class="solid"></line>
+    <path d="M 5.28,52.800003 A 10.56,10.56 0,0,0 5.28,63.36" class="nofill"></path>
+    <line x1="5.28" y1="63.36" x2="15.84" y2="63.36" class="solid"></line>
+    <path d="M 26.400002,52.800003 A 21.12,21.12 0,0,1 15.84,63.36" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="26.400002" y1="21.12" x2="31.68" y2="21.12" class="solid"></line>
+    <path d="M 26.400002,21.12 A 10.56,10.56 0,0,0 26.400002,31.68" class="nofill"></path>
+    <line x1="26.400002" y1="31.68" x2="27.720001" y2="34.32" class="solid"></line>
+    <path d="M 27.720001,34.32 A 5.28,5.28 0,0,0 31.68,36.960003" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/script/dietcola.flf b/static/db/jave/script/dietcola.flf
similarity index 100%
rename from db/jave/script/dietcola.flf
rename to static/db/jave/script/dietcola.flf
diff --git a/static/db/jave/script/dietcola.svg b/static/db/jave/script/dietcola.svg
new file mode 100644
index 0000000..734a326
--- /dev/null
+++ b/static/db/jave/script/dietcola.svg
@@ -0,0 +1,124 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="79.200005" height="73.920006" 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="79.200005" height="73.920006"></rect>
+  <text x="69.96" y="29.04" >.</text>
+  <text x="38.280003" y="39.600002" >.</text>
+  <line x1="42.24" y1="42.24" x2="63.36" y2="42.24" class="solid"></line>
+  <text x="64.68" y="39.600002" >.&#39;</text>
+  <text x="11.88" y="50.160004" >:&#39;</text>
+  <text x="17.16" y="60.72" >.</text>
+  <text x="64.68" y="60.72" >&#39;</text>
+  <g>
+    <line x1="52.800003" y1="0" x2="26.400002" y2="52.800003" class="solid"></line>
+    <line x1="52.800003" y1="0" x2="55.440002" y2="5.28" class="solid"></line>
+    <line x1="55.440002" y1="5.28" x2="55.440002" y2="55.440002" class="solid"></line>
+    <path d="M 55.440002,55.440002 A 2.64,2.64 0,0,0 58.08,58.08" class="nofill"></path>
+    <line x1="58.08" y1="58.08" x2="63.36" y2="58.08" class="solid"></line>
+    <path d="M 10.56,47.52 A 5.28,5.28 0,0,0 6.6000004,50.160004" class="nofill"></path>
+    <line x1="6.6000004" y1="50.160004" x2="5.28" y2="52.800003" class="solid"></line>
+    <path d="M 5.28,52.800003 A 10.56,10.56 0,0,0 5.28,63.36" class="nofill"></path>
+    <line x1="5.28" y1="63.36" x2="15.84" y2="63.36" class="solid"></line>
+    <path d="M 26.400002,52.800003 A 21.12,21.12 0,0,1 15.84,63.36" class="nofill"></path>
+  </g>
+  <g>
+    <line x1="26.400002" y1="21.12" x2="31.68" y2="21.12" class="solid"></line>
+    <path d="M 26.400002,21.12 A 10.56,10.56 0,0,0 26.400002,31.68" class="nofill"></path>
+    <line x1="26.400002" y1="31.68" x2="27.720001" y2="34.32" class="solid"></line>
+    <path d="M 27.720001,34.32 A 5.28,5.28 0,0,0 31.68,36.960003" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/script/santaclara.flf b/static/db/jave/script/santaclara.flf
similarity index 100%
rename from db/jave/script/santaclara.flf
rename to static/db/jave/script/santaclara.flf
diff --git a/static/db/jave/script/santaclara.svg b/static/db/jave/script/santaclara.svg
new file mode 100644
index 0000000..2d3a159
--- /dev/null
+++ b/static/db/jave/script/santaclara.svg
@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="52.800003" 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="42.24" height="52.800003"></rect>
+  <text x="27.720001" y="7.92" >,</text>
+  <g>
+    <line x1="21.12" y1="10.56" x2="29.04" y2="10.56" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="29.04" y1="10.56" x2="29.04" y2="42.24" class="solid"></line>
+    <line x1="13.200001" y1="26.400002" x2="29.04" y2="26.400002" class="solid"></line>
+    <line x1="0" y1="42.24" x2="5.28" y2="42.24" class="solid"></line>
+    <line x1="29.04" y1="42.24" x2="36.960003" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/stroke/1row.flf b/static/db/jave/stroke/1row.flf
similarity index 100%
rename from db/jave/stroke/1row.flf
rename to static/db/jave/stroke/1row.flf
diff --git a/static/db/jave/stroke/1row.svg b/static/db/jave/stroke/1row.svg
new file mode 100644
index 0000000..7f74bf5
--- /dev/null
+++ b/static/db/jave/stroke/1row.svg
@@ -0,0 +1,103 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.84" height="21.12" 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="15.84" height="21.12"></rect>
+  <g>
+    <line x1="5.28" y1="0" x2="0" y2="10.56" class="solid"></line>
+    <line x1="5.28" y1="0" x2="10.56" y2="10.56" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/stroke/B1FF.flf b/static/db/jave/stroke/B1FF.flf
similarity index 100%
rename from db/jave/stroke/B1FF.flf
rename to static/db/jave/stroke/B1FF.flf
diff --git a/static/db/jave/stroke/B1FF.svg b/static/db/jave/stroke/B1FF.svg
new file mode 100644
index 0000000..dcbf904
--- /dev/null
+++ b/static/db/jave/stroke/B1FF.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="21.12" 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="21.12" height="21.12"></rect>
+  <g>
+    <line x1="5.28" y1="0" x2="0" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="5.28" x2="13.200001" y2="5.28" class="solid"></line>
+    <line x1="10.56" y1="0" x2="15.84" y2="10.56" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/stroke/amc3line.flf b/static/db/jave/stroke/amc3line.flf
similarity index 100%
rename from db/jave/stroke/amc3line.flf
rename to static/db/jave/stroke/amc3line.flf
diff --git a/static/db/jave/stroke/amc3line.svg b/static/db/jave/stroke/amc3line.svg
new file mode 100644
index 0000000..63d7d62
--- /dev/null
+++ b/static/db/jave/stroke/amc3line.svg
@@ -0,0 +1,108 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="42.24" 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="21.12" height="42.24"></rect>
+  <text x="1.32" y="29.04" >`</text>
+  <g>
+    <path d="M 5.28,5.28 A 2.64,2.64 0,0,0 2.64,7.92" class="nofill"></path>
+    <line x1="2.64" y1="7.92" x2="2.64" y2="21.12" class="solid"></line>
+    <line x1="5.28" y1="5.28" x2="10.56" y2="5.28" class="solid"></line>
+    <path d="M 10.56,5.28 A 2.64,2.64 0,0,1 13.200001,7.92" class="nofill"></path>
+    <line x1="13.200001" y1="7.92" x2="13.200001" y2="23.76" class="solid"></line>
+    <line x1="2.64" y1="15.84" x2="13.200001" y2="15.84" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/stroke/amcslder.flf b/static/db/jave/stroke/amcslder.flf
similarity index 100%
rename from db/jave/stroke/amcslder.flf
rename to static/db/jave/stroke/amcslder.flf
diff --git a/static/db/jave/stroke/amcslder.svg b/static/db/jave/stroke/amcslder.svg
new file mode 100644
index 0000000..e794274
--- /dev/null
+++ b/static/db/jave/stroke/amcslder.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="84.48" height="63.36" 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="84.48" height="63.36"></rect>
+  <line x1="39.600002" y1="10.56" x2="2.64" y2="47.52" class="broken"></line>
+  <text x="33" y="29.04" >&#39;``</text>
+  <text x="38.280003" y="18.480001" >&#39;.</text>
+  <line x1="44.88" y1="15.84" x2="76.560005" y2="47.52" class="broken"></line>
+  <text x="1.32" y="50.160004" >.</text>
+  <text x="75.240005" y="50.160004" >.</text>
+</svg>
diff --git a/db/jave/stroke/ascii_new_roman.flf b/static/db/jave/stroke/ascii_new_roman.flf
similarity index 100%
rename from db/jave/stroke/ascii_new_roman.flf
rename to static/db/jave/stroke/ascii_new_roman.flf
diff --git a/static/db/jave/stroke/ascii_new_roman.svg b/static/db/jave/stroke/ascii_new_roman.svg
new file mode 100644
index 0000000..c0511b6
--- /dev/null
+++ b/static/db/jave/stroke/ascii_new_roman.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.24" height="52.800003" 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="42.24" height="52.800003"></rect>
+  <text x="33" y="7.92" >,</text>
+  <text x="33" y="29.04" >,</text>
+  <g>
+    <line x1="10.56" y1="10.56" x2="31.68" y2="10.56" class="solid"></line>
+    <path d="M 10.56,10.56 A 10.56,10.56 0,0,0 10.56,21.12" class="nofill"></path>
+    <line x1="10.56" y1="15.84" x2="18.480001" y2="15.84" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="15.84" y1="21.12" x2="29.04" y2="21.12" class="solid"></line>
+    <line x1="29.04" y1="10.56" x2="29.04" y2="31.68" class="solid"></line>
+    <line x1="5.28" y1="31.68" x2="10.56" y2="31.68" class="solid"></line>
+    <path d="M 5.28,31.68 A 10.56,10.56 0,0,0 5.28,42.24" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/stroke/benjamin.flf b/static/db/jave/stroke/benjamin.flf
similarity index 100%
rename from db/jave/stroke/benjamin.flf
rename to static/db/jave/stroke/benjamin.flf
diff --git a/static/db/jave/stroke/benjamin.svg b/static/db/jave/stroke/benjamin.svg
new file mode 100644
index 0000000..dcbf904
--- /dev/null
+++ b/static/db/jave/stroke/benjamin.svg
@@ -0,0 +1,104 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="21.12" 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="21.12" height="21.12"></rect>
+  <g>
+    <line x1="5.28" y1="0" x2="0" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="5.28" x2="13.200001" y2="5.28" class="solid"></line>
+    <line x1="10.56" y1="0" x2="15.84" y2="10.56" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/stroke/bigfig.flf b/static/db/jave/stroke/bigfig.flf
similarity index 100%
rename from db/jave/stroke/bigfig.flf
rename to static/db/jave/stroke/bigfig.flf
diff --git a/static/db/jave/stroke/bigfig.svg b/static/db/jave/stroke/bigfig.svg
new file mode 100644
index 0000000..4149fac
--- /dev/null
+++ b/static/db/jave/stroke/bigfig.svg
@@ -0,0 +1,100 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.12" height="42.24" 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="21.12" height="42.24"></rect>
+  <rect x="2.64" y="10.56" width="10.56" height="21.119999" class="solid nofill" rx="0"></rect>
+</svg>
diff --git a/db/jave/stroke/cygnet.flf b/static/db/jave/stroke/cygnet.flf
similarity index 100%
rename from db/jave/stroke/cygnet.flf
rename to static/db/jave/stroke/cygnet.flf
diff --git a/static/db/jave/stroke/cygnet.svg b/static/db/jave/stroke/cygnet.svg
new file mode 100644
index 0000000..4dff90f
--- /dev/null
+++ b/static/db/jave/stroke/cygnet.svg
@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.68" height="52.800003" 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="31.68" height="52.800003"></rect>
+  <text x="1.32" y="39.600002" >&#39;</text>
+  <text x="22.44" y="39.600002" >&#39;</text>
+  <g>
+    <line x1="13.200001" y1="15.84" x2="5.28" y2="31.68" class="solid"></line>
+    <line x1="13.200001" y1="15.84" x2="21.12" y2="31.68" class="solid"></line>
+    <line x1="5.28" y1="31.68" x2="21.12" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/stroke/muzzle.flf b/static/db/jave/stroke/muzzle.flf
similarity index 100%
rename from db/jave/stroke/muzzle.flf
rename to static/db/jave/stroke/muzzle.flf
diff --git a/static/db/jave/stroke/muzzle.svg b/static/db/jave/stroke/muzzle.svg
new file mode 100644
index 0000000..f2e53e4
--- /dev/null
+++ b/static/db/jave/stroke/muzzle.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="52.800003" 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="26.400002" height="52.800003"></rect>
+  <text x="6.6000004" y="29.04" >&gt;&lt;</text>
+  <g>
+    <line x1="2.64" y1="10.56" x2="18.480001" y2="10.56" class="solid"></line>
+    <line x1="2.64" y1="10.56" x2="2.64" y2="42.24" class="solid"></line>
+    <line x1="18.480001" y1="10.56" x2="18.480001" y2="42.24" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/stroke/shimrod.flf b/static/db/jave/stroke/shimrod.flf
similarity index 100%
rename from db/jave/stroke/shimrod.flf
rename to static/db/jave/stroke/shimrod.flf
diff --git a/static/db/jave/stroke/shimrod.svg b/static/db/jave/stroke/shimrod.svg
new file mode 100644
index 0000000..c7fc113
--- /dev/null
+++ b/static/db/jave/stroke/shimrod.svg
@@ -0,0 +1,107 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="63.36" 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="26.400002" height="63.36"></rect>
+  <text x="6.6000004" y="7.92" >,.</text>
+  <g>
+    <line x1="5.28" y1="10.56" x2="2.64" y2="15.84" class="solid"></line>
+    <line x1="2.64" y1="15.84" x2="2.64" y2="44.88" class="solid"></line>
+    <line x1="15.84" y1="10.56" x2="18.480001" y2="15.84" class="solid"></line>
+    <line x1="18.480001" y1="15.84" x2="18.480001" y2="44.88" class="solid"></line>
+    <line x1="2.64" y1="26.400002" x2="18.480001" y2="26.400002" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/stroke/stampate.flf b/static/db/jave/stroke/stampate.flf
similarity index 100%
rename from db/jave/stroke/stampate.flf
rename to static/db/jave/stroke/stampate.flf
diff --git a/static/db/jave/stroke/stampate.svg b/static/db/jave/stroke/stampate.svg
new file mode 100644
index 0000000..07c2f69
--- /dev/null
+++ b/static/db/jave/stroke/stampate.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="47.52" height="52.800003" 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="47.52" height="52.800003"></rect>
+  <text x="22.44" y="7.92" >,</text>
+  <text x="1.32" y="39.600002" >,&#39;</text>
+  <g>
+    <line x1="29.04" y1="7.92" x2="29.04" y2="34.32" class="solid"></line>
+    <path d="M 29.04,34.32 A 2.64,2.64 0,0,0 31.68,36.960003" class="nofill"></path>
+    <line x1="31.68" y1="36.960003" x2="36.960003" y2="36.960003" class="solid"></line>
+    <line x1="21.12" y1="10.56" x2="10.56" y2="31.68" class="solid"></line>
+    <line x1="13.200001" y1="26.400002" x2="36.960003" y2="26.400002" class="broken"></line>
+    <path d="M 36.960003,26.400002 A 2.64,2.64 0,0,1 39.600002,29.04" class="nofill"></path>
+    <line x1="39.600002" y1="29.04" x2="39.600002" y2="34.32" class="solid"></line>
+    <path d="M 39.600002,34.32 A 2.64,2.64 0,0,1 36.960003,36.960003" class="nofill"></path>
+  </g>
+</svg>
diff --git a/db/jave/stroke/swan.flf b/static/db/jave/stroke/swan.flf
similarity index 100%
rename from db/jave/stroke/swan.flf
rename to static/db/jave/stroke/swan.flf
diff --git a/static/db/jave/stroke/swan.svg b/static/db/jave/stroke/swan.svg
new file mode 100644
index 0000000..2671745
--- /dev/null
+++ b/static/db/jave/stroke/swan.svg
@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52.800003" height="84.48" 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="52.800003" height="84.48"></rect>
+  <text x="1.32" y="71.28001" >&#39;</text>
+  <text x="43.56" y="71.28001" >`</text>
+  <g>
+    <line x1="23.76" y1="26.400002" x2="5.28" y2="63.36" class="solid"></line>
+    <line x1="23.76" y1="26.400002" x2="42.24" y2="63.36" class="solid"></line>
+    <line x1="10.56" y1="52.800003" x2="36.960003" y2="52.800003" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/stroke/wavy.flf b/static/db/jave/stroke/wavy.flf
similarity index 100%
rename from db/jave/stroke/wavy.flf
rename to static/db/jave/stroke/wavy.flf
diff --git a/static/db/jave/stroke/wavy.svg b/static/db/jave/stroke/wavy.svg
new file mode 100644
index 0000000..2ab4e79
--- /dev/null
+++ b/static/db/jave/stroke/wavy.svg
@@ -0,0 +1,106 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="42.24" 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="26.400002" height="42.24"></rect>
+  <g>
+    <line x1="10.56" y1="10.56" x2="15.84" y2="10.56" class="solid"></line>
+    <line x1="10.56" y1="10.56" x2="0" y2="31.68" class="solid"></line>
+    <line x1="5.28" y1="21.12" x2="15.84" y2="21.12" class="solid"></line>
+    <path d="M 15.84,10.56 A 10.56,10.56 0,0,1 15.84,21.12" class="nofill"></path>
+    <line x1="15.84" y1="21.12" x2="10.56" y2="31.68" class="solid"></line>
+  </g>
+</svg>
diff --git a/db/jave/stroke/wow.flf b/static/db/jave/stroke/wow.flf
similarity index 100%
rename from db/jave/stroke/wow.flf
rename to static/db/jave/stroke/wow.flf
diff --git a/static/db/jave/stroke/wow.svg b/static/db/jave/stroke/wow.svg
new file mode 100644
index 0000000..8945535
--- /dev/null
+++ b/static/db/jave/stroke/wow.svg
@@ -0,0 +1,105 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26.400002" height="21.12" 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="26.400002" height="21.12"></rect>
+  <line x1="5.28" y1="0" x2="0" y2="10.56" class="solid"></line>
+  <g>
+    <line x1="10.56" y1="0" x2="5.28" y2="10.56" class="solid"></line>
+    <line x1="7.92" y1="5.28" x2="18.480001" y2="5.28" class="solid"></line>
+    <line x1="15.84" y1="0" x2="21.12" y2="10.56" class="solid"></line>
+  </g>
+</svg>
diff --git a/templates/base.html b/templates/base.html
index 6aa467d..91500c2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -11,10 +11,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- CSS reset, uncomment this line to supress the default browser CSS style -->
-    <link rel="stylesheet" type="text/css" href="static/css/reset.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/reset.css" />
+
+    <link rel="stylesheet" type="text/css" href="/static/css/basics.css" />
 
     <!-- CSS that is applied but outside of pad (for interface, etc) -->
-    <link rel="stylesheet" type="text/css" href="static/css/interface.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/interface.css" />
 
     {% block head %}{% endblock %}
 
diff --git a/templates/catalogue.html b/templates/catalogue.html
index 78addbe..1a0654e 100644
--- a/templates/catalogue.html
+++ b/templates/catalogue.html
@@ -5,55 +5,60 @@
 {% block body %}
 
   <header class="controls">
-    <label>figfont</label>
-    <details>
-      <summary>mini</summary>
+    <details class="collection-menu" id="collection-menu">
+      <summary id="current-figfont">swan.flf</summary>
       <div>
       {% for type, type_data in collection.items()%}
         <details>
           <summary>{{type}} <span>{{type_data['ascii']}}</span></summary>
-          <div class="collection">
+          <div class="collection" style="--index: {{loop.index}};">
+
           {% 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>
+              <div data-path="{{f['path']}}" data-name="{{f['name']}}" class="{{f['database']}} figfont">
+                <img class="thumbnail" src="{{f['thumbnail']}}">
+                {{f['name']}}
+              </div>
             {% endfor %}
           {% endfor %}
+          <a class="specimen-link" href="/specimen/{{type}}" target="_blank">see all {{type}}</a>
+
           </div>
         </details>
       {% endfor %}
+        <div class="collection-menu-back">
+          {% for database, legend in databases.items() %}
+            <div class="legend {{database}}"><strong>{{database}}</strong> {{legend}}</div>
+          {% endfor %}
+        </div>
       </div>
     </details>
 
+    <hr>
+
     <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"
+    <!-- <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/>
+            class="body-class-check" value="check-fix" checked/> -->
             
   </header>
 
-  <div class="font catalogue" id="main">
-    <iframe class="f-double" id="svg-iframe" src="/writing/{{ 'db/default/stroke/mini.flf'.split('/') | join('_') }}">
+  <div class="font catalogue reload" id="main">
+    <iframe   class="f-double" id="svg-iframe" 
+              src="/writing/{{ 'static/db/jave/stroke/swan.flf'.split('/') | join('$') }}">
     </iframe>
   </div>
 
@@ -61,6 +66,8 @@
     let button_svg = document.getElementById('button-svg');
     let svg_iframe = document.getElementById('svg-iframe');
     let pad_iframe = document.getElementById('pad-iframe');
+    let figfonts = document.querySelectorAll('.figfont');
+    let current = document.getElementById('current-figfont');
 
     let new_url = new URL(svg_iframe.src);
 
@@ -76,6 +83,28 @@
         frame.src = new_src;
     }
 
+    // --- change current figfont
+    for(let figfont of figfonts){
+      figfont.addEventListener('click', function(){
+        let encoded_path = figfont.dataset.path.split('/').join('$');
+        let figname = figfont.dataset.name;
+
+        let svg_src = svg_iframe.src;
+        svg_src = svg_src.split('/');
+
+        svg_src[svg_src.length-1] = encoded_path;
+        svg_src = svg_src.join('/');
+
+        current.innerHTML = figname;
+
+        new_url = new URL(svg_src);
+
+        document.getElementById('main').classList.add("reload");
+        document.getElementById('collection-menu').removeAttribute("open");
+        svg_iframe.src = svg_src;
+      });
+    }
+
     // --- svg generation button
     button_svg.addEventListener('click', function(){
       svg_iframe.src = new_url;
diff --git a/templates/draw.html b/templates/draw.html
index 6f6a813..1e7637a 100644
--- a/templates/draw.html
+++ b/templates/draw.html
@@ -16,11 +16,6 @@
     <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="c" data-frame="svg-iframe" checked/>
   </header>
 
   <div class="font reload" id="main">
@@ -56,7 +51,6 @@
     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('-');
@@ -69,10 +63,9 @@
       svg_src[svg_src.length-1] = value;
       svg_src = svg_src.join('/');
 
-      new_url = new URL(svg_iframe.src);
-
+      new_url = new URL(svg_src);
+      svg_iframe.src = new_url;
       document.getElementById('main').classList.add("reload");
-      svg_iframe.src = svg_src;
     });
 
     // --- svg generation button
diff --git a/templates/drawing.html b/templates/drawing.html
index b7e8055..3e89930 100644
--- a/templates/drawing.html
+++ b/templates/drawing.html
@@ -4,27 +4,7 @@
     <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-buttons{
-        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;
-      }
-      input, button{
-        font-family: monospace;
-      }
-    </style>
+    <link rel="stylesheet" type="text/css" href="/static/css/basics.css" />
   </head>
 
   <body>
@@ -32,23 +12,31 @@
     {{ svg|safe }}
 
     <div id="save-buttons">
+      <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" data-name="c" data-frame="svg-iframe" checked/>
       <button id="save-svg">get SVG</button>
       <button id="save-hpgl">get HPGL</button>
     </div>
 
     <script>
-      function get2bodyclass(){
-        const url = new URL(window.location.href);
-        let checked; 
-        checked = url.searchParams.get("c");
-        if(checked == "false"){
-          document.body.classList.remove("check-text");
+      function toggle_class(classname, val){
+        if(val){
+            document.body.classList.add(classname);
         }
         else{
-          document.body.classList.add("check-text");
+            document.body.classList.remove(classname);
         }
       }
-      get2bodyclass();
+      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>
 
     <script>
diff --git a/templates/font.html b/templates/font.html
index 9b81496..ba11935 100644
--- a/templates/font.html
+++ b/templates/font.html
@@ -9,24 +9,19 @@
     <input id="pad-name" type="text" value="{{params['pad']}}" data-name="p"/>
     <button id="button-pad" data-use="pad-name">go</button>
 
+    <hr>
+
     <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  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 reload" id="main">
@@ -73,10 +68,9 @@
         svg_src[svg_src.length-1] = value;
         svg_src = svg_src.join('/');
 
-        new_url = new URL(svg_iframe.src);
-
+        new_url = new URL(svg_src)
+        svg_iframe.src = new_url;
         document.getElementById('main').classList.add("reload");
-        svg_iframe.src = svg_src;
     });
 
     // --- svg generation button
diff --git a/templates/index.html b/templates/index.html
index 7ec3f73..e66a46b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,13 +16,16 @@
         </div>
 
         <ul class="special">
-            <li><a href="https://etherpad.org/" target="_blank">Etherpad</a></li>
+            <li class="choice">
+              <div class="materiality"><a href="https://etherpad.org/" target="_blank">Etherpad</a></div>
+              <div class="materiality"><a href="http://www.figlet.org/" target="_blank">FIGlet</a></div>
+            </li>
             <li>2</li>
-            <li><a href="http://www.figlet.org/" target="_blank">FIGlet</a></li>
-            <li>2</li>
-            <li><a href="https://ivanceras.github.io/svgbob-editor/" target="_blank">Svgbob.rs</a></li>
-            <li>2</li>
-            <li><a href="https://en.wikipedia.org/wiki/HP-GL" target="_blank">HPGL</a></li>
+            <li class="materiality">ASCII</li>
+            <li>2 <a href="https://ivanceras.github.io/svgbob-editor/" target="_blank">Svgbob.rs</a></li>
+            <li class="materiality">SVG</li>
+            <li>2 <a href="https://github.com/abey79/vpype" target="_blank">vpype</a></li>
+            <li class="materiality">HPGL</li>
         </ul>
     </div>
     <div class="box two-columns">
diff --git a/templates/writing.html b/templates/writing.html
index 317e7d2..f9def79 100644
--- a/templates/writing.html
+++ b/templates/writing.html
@@ -4,77 +4,43 @@
     <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;
-
-      }
-      .f-svg svg{
-        overflow: visible;
-      }
-      input, button{
-        font-family: monospace;
-      }
-    </style>
+    <link rel="stylesheet" type="text/css" href="/static/css/basics.css" />
   </head>
 
   <body class="double-font">
 
     <div class="f-svg">
       {{ svg|safe }}
+
+      <div id="save-buttons">
+        <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" data-name="c" data-frame="svg-iframe" checked/>
+        <button id="save-svg">get SVG</button>
+        <button id="save-hpgl">get HPGL</button>
+      </div>
     </div>
 
     <div class="f-ascii"><pre>{{ ascii|safe }}</pre></div>
 
-    <div id="save-buttons">
-      <button id="save-svg">get SVG</button>
-      <button id="save-hpgl">get HPGL</button>
-    </div>
-
     <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");
+      function toggle_class(classname, val){
+        if(val){
+            document.body.classList.add(classname);
         }
         else{
-          document.body.classList.add("check-text");
+            document.body.classList.remove(classname);
         }
       }
-      get2bodyclass();
+      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>
 
     <script>