diff --git a/README.md b/README.md
index 46c4938e73e39d5ea048de625479da51e3cf7ab0..cb42e12e12e35c4055edd66307c385e006ac52cc 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 c390ed8b16536a524da8eaa5025e7c96e43f5b19..629aa724c5c56ac30aac20db4f453ea6b3e96440 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 94a2efa6330955f9b6e8c3e64c6e2df8c230d724..98b904ed92e71898cecb96d283df5368cae1ec0a 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 be192cfd0cc31c634a451d5fb59e06108bf8fb6f..c7d938aba9078e0e3953344f76edc72bea2934ca 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 13a7e7cc59ca257a6cfce6df8001fdb9dc878217..5ef9e6aaaa81592781c79be660d4e7bd29369dda 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 0000000000000000000000000000000000000000..775aeedca53d577ce8db3ba27b7370d3b4990a16
--- /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 c6a283efbddbada95f0c5c86193f6b8f8ff1e60d..9f9109ade2ee6e4091ab963a34524c7842008302 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 0000000000000000000000000000000000000000..6e3d084caabf283067fbc458b3cc9f3c8cdfa5f4
--- /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 0000000000000000000000000000000000000000..34a105ed8d68943939756b6a9e113a753a199442
--- /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 0000000000000000000000000000000000000000..18d8e9f8cd5a925855c48a6b4ab02427c8cd9e83
--- /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 0000000000000000000000000000000000000000..1029029cc0f3149f647afa703f254da46b62a009
--- /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 0000000000000000000000000000000000000000..ae4aab3eddd362ca5a16a9e34153ae44c6ccb90e
--- /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 0000000000000000000000000000000000000000..f75219e8337706a7bfa78d746c4eb5da1b874a7b
--- /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 0000000000000000000000000000000000000000..d3896919cf5751bd10a2cc991052e61c9bc8c6f6
--- /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 0000000000000000000000000000000000000000..2dc1db087886d607ab2b4122d8ef169dc9be31d0
--- /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 0000000000000000000000000000000000000000..fb69b8f731a6a1e9e523acd1b76a0de20ef5b745
--- /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 0000000000000000000000000000000000000000..51ee988bb0e6bafbb323617612bb06ad0f86ae3d
--- /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 0000000000000000000000000000000000000000..04f609e3f05eb1c99098e6f31a9b2824fa5c98ac
--- /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 0000000000000000000000000000000000000000..ff4f65e81592197d3aadc25751683a4e123889a4
--- /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 0000000000000000000000000000000000000000..7663374fd1f9d5c60117529c609b8e368fbe8c7d
--- /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 0000000000000000000000000000000000000000..c1d7db3193935ceb07a1cb79bfb9ac02bfd798db
--- /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 0000000000000000000000000000000000000000..c47343601be7208bb548d659b59cfb27743d1763
--- /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 0000000000000000000000000000000000000000..e0d112904449e05ddadbd18b7a0542ab1058e600
--- /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 0000000000000000000000000000000000000000..85f94f1c6cba6a7f2ab7d828c48ba5111b9229af
--- /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 0000000000000000000000000000000000000000..de745c974fb22f345e043bf4b9a4fa630143e175
--- /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 0000000000000000000000000000000000000000..95ccdc6c8cca050c38aa9c113f2f491f0bd525a5
--- /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 0000000000000000000000000000000000000000..7914869c37a118d51fb33671b77b754d41bc3815
--- /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 0000000000000000000000000000000000000000..6f00a4857d997a643966726304bf0a87d550f865
--- /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 0000000000000000000000000000000000000000..188703b6e422069193b7b1ecccaae3af13824530
--- /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 0000000000000000000000000000000000000000..c7027d0f6637b93e8ee2f0a412108d02bc93961d
--- /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 0000000000000000000000000000000000000000..43b782403800121db61697dc4d0d82cb513b8c79
--- /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 0000000000000000000000000000000000000000..0b9202508e2b233bce9adeac016cb393faadff77
--- /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 0000000000000000000000000000000000000000..9ef7e4cfcff0372ccec98a7c3cdd08d35b47f091
--- /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 0000000000000000000000000000000000000000..30291771e4bd03efec44105b364cab1c61c280a3
--- /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 0000000000000000000000000000000000000000..457b3c9ee55a47854142aa0c94ebc5554b04f929
--- /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 0000000000000000000000000000000000000000..12c6eabfb9379d3446afb7bfc512db4c41185a59
--- /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 0000000000000000000000000000000000000000..835ce4db766c4867f0d50b2cd4e7ecd617881173
--- /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 0000000000000000000000000000000000000000..dfae48e0297eb8840a4c8299259b5d428e6b9458
--- /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 0000000000000000000000000000000000000000..3aa350f82b818eb13bd61cc3e0de24b42b5bff16
--- /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 0000000000000000000000000000000000000000..79bc1013f985196da7a1694235542ba447937e47
--- /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 0000000000000000000000000000000000000000..d4b29b9909312aebab9f4f73c96b710147f15f25
--- /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 0000000000000000000000000000000000000000..00347e1cb46d8f3ef9b157c38c64f60b74239bf2
--- /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 0000000000000000000000000000000000000000..84647ad1d76748d58c2f8dc8dc9fb5ea2e30f29e
--- /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 0000000000000000000000000000000000000000..a6302d9b3eb0b8d092505344dd5e873626e9259b
--- /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 0000000000000000000000000000000000000000..6c81907fa557d40f1905f1a04bd58fae80f93631
--- /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 0000000000000000000000000000000000000000..745f34e470fbd6977ccf5c23d6874f03c465c223
--- /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 0000000000000000000000000000000000000000..404f95f54e89abd5a4a07bab46e9780e3d0060f1
--- /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 0000000000000000000000000000000000000000..91f94bec7f28b08e76254c7439040835a1bc7b31
--- /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 0000000000000000000000000000000000000000..21d6a66b8eea9183e2a62f461d0122ce2b6b0565
--- /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 0000000000000000000000000000000000000000..8150c0fe6a29b1649ba252831fab259563e0e0a9
--- /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 0000000000000000000000000000000000000000..5f6ea207fe29e734c92e68381c7d1b255bb5cad1
--- /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 0000000000000000000000000000000000000000..36cf50f154f39656709651299bcb9734c565ac46
--- /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 0000000000000000000000000000000000000000..45dced028231afe81da7bb626d46e10ea5b0bda5
--- /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 0000000000000000000000000000000000000000..aa22f37730cba7590f8c87dcf403c5922e2ce65d
--- /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 0000000000000000000000000000000000000000..508b6459d27d1de55b1b972c3f8e889ce3e51961
--- /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 0000000000000000000000000000000000000000..b78ed7d3d8e30c52362b3a5ba63a605239946e3a
--- /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 0000000000000000000000000000000000000000..b78ed7d3d8e30c52362b3a5ba63a605239946e3a
--- /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 0000000000000000000000000000000000000000..64d450aefdf21199e54790d6c4c022cba44f991c
--- /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 0000000000000000000000000000000000000000..9d38b3af77c52afb0b4f5153983ee5bb546ed88c
--- /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 0000000000000000000000000000000000000000..0d4aa82d35f55d7ec5a37032d9d0e10e616f2d11
--- /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 0000000000000000000000000000000000000000..2c3c6793e06f497a8f898e218b19ae2ced39756f
--- /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 0000000000000000000000000000000000000000..8c335ec38c26f262b538a2eda02b6f268c0b75ca
--- /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 0000000000000000000000000000000000000000..47f753510891c56beb07c56e54676f1e445e2737
--- /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 0000000000000000000000000000000000000000..a42d1be41cf08451f4da4c27c66818dad419e97f
--- /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 0000000000000000000000000000000000000000..a057cb36e3c1d5fcfe120c013e33d506aa0ddabc
--- /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 0000000000000000000000000000000000000000..6f9440738cbf42cce4946cefdff6f5c34afb2854
--- /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 0000000000000000000000000000000000000000..ab72dcccbbb1a3c545aef4af6e3d3967e5f579e3
--- /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 0000000000000000000000000000000000000000..9976f5215ccd7dcf12e32bd24c44a4e3462a14b1
--- /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 0000000000000000000000000000000000000000..d6eeca193de5c3655237db9a6a70d71b70853712
--- /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 0000000000000000000000000000000000000000..1f726b10473deca11bd69b37b799404bfd6be714
--- /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 0000000000000000000000000000000000000000..e8598b58f2d55452f974e81e78ae74b0adde9f46
--- /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 0000000000000000000000000000000000000000..5ae6ac4fd9b40d481c1cc347b850d2323c66ed0c
--- /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 0000000000000000000000000000000000000000..67daf29e647b0dd718c0dd4f1c07593b37842c3a
--- /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 0000000000000000000000000000000000000000..c8cd61ad940c9df1f61e0d4471f260bffd80dc8c
--- /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 0000000000000000000000000000000000000000..b56d6442377b5e06d4c7071aa508c348b873cf7d
--- /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 0000000000000000000000000000000000000000..002fe57b036194b4aa5eb2067bb2bf19756ac48e
--- /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 0000000000000000000000000000000000000000..a826262c695450db8f7773be3751eb07be6ec742
--- /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 0000000000000000000000000000000000000000..7c3f6f2042b6691edff63ece21d34ab11da9beec
--- /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 0000000000000000000000000000000000000000..675021b0e952994e58ad67db3b5f25da35a58626
--- /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 0000000000000000000000000000000000000000..3a8c4e9b8f984d85a2e9475ae3377198fdc060aa
--- /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 0000000000000000000000000000000000000000..7c46c9c4721ef14bb769448186772e5895147af4
--- /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 0000000000000000000000000000000000000000..9915636ffe6da1c97d90190de263301a2a16194e
--- /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 0000000000000000000000000000000000000000..58cc08b637cfe06cb3605267580e385e5c0ae23a
--- /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 0000000000000000000000000000000000000000..72f4ae1beb88aa4a2d4252e2a004770b21ff00a3
--- /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 0000000000000000000000000000000000000000..19eabd757775b3232989f4bef2cc4f3adde31ff5
--- /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 0000000000000000000000000000000000000000..ca2c5003dc5461af49c3cf21f54457c285581abf
--- /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 0000000000000000000000000000000000000000..d2ec12e05c80119f2adb56b7ce3345bd64875d0f
--- /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 0000000000000000000000000000000000000000..6e457fa9cc131bad026b9b54d1052faf4b416941
--- /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 0000000000000000000000000000000000000000..d6767b0fcfdd743aaee3a5e664d81cb690c3dea6
--- /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 0000000000000000000000000000000000000000..c350c54884776b18179dbbe0bf9765f42eb46e00
--- /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 0000000000000000000000000000000000000000..7f460cfe41ddff4940846f36b4ee6102037cd566
--- /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 0000000000000000000000000000000000000000..8cc35a606c25c4b642a07afdbab971b09462e919
--- /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 0000000000000000000000000000000000000000..679de8d7fb468e5dd6b40a66a32c77df242c8d71
--- /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 0000000000000000000000000000000000000000..573e1bd162eea1e50607348b94d1830ba10755a1
--- /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 0000000000000000000000000000000000000000..5fe919cbf5f3803ea386df0c31bb7c907b048b7b
--- /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 0000000000000000000000000000000000000000..0b0af059d18fe7ddd6be870f107a205af2f683d2
--- /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 0000000000000000000000000000000000000000..84ba9f7e4b9b8a4f6bf25ca2fdebc793ce37089e
--- /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 0000000000000000000000000000000000000000..7436eaf8acbb579612a920dc506699fba0969b90
--- /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 0000000000000000000000000000000000000000..f8a92c1542c069db18d2923bf5c503b70bc317d4
--- /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 0000000000000000000000000000000000000000..d8d07536f1ae08e8ac3106fee9604e7193c4163a
--- /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 0000000000000000000000000000000000000000..053baf8e8760c33c6ca74766a44ecccf20c4bab3
--- /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 0000000000000000000000000000000000000000..db06cf597fc28a79aaedd98e0967d805d10bbfff
--- /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 0000000000000000000000000000000000000000..d0a736d4f052917b567e381f9a02112a77cb72cd
--- /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 0000000000000000000000000000000000000000..91a3d64cc08ba695b57798aa7f53ec59c14d5a83
--- /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 0000000000000000000000000000000000000000..930b5fa1641882650e6af6b773d210c9c1fd7555
--- /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 0000000000000000000000000000000000000000..fe1d64047ff9153207ac255b3a12f40adec4ef10
--- /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 0000000000000000000000000000000000000000..b91bf6229352128c09668796014c31ea9e16b8fc
--- /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 0000000000000000000000000000000000000000..9b10eec613a95e52d1b9b1d7366e2284d8b237a3
--- /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 0000000000000000000000000000000000000000..62560b41580c749f6657c134a36352b9ba81f07b
--- /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 0000000000000000000000000000000000000000..003049bbfb285ca9394a51139e94edf9b4a6e6c0
--- /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 0000000000000000000000000000000000000000..da17b2a6a4dfe7312d954e56357291d79cb848dc
--- /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 0000000000000000000000000000000000000000..86a5139d180c0e38ffa07707663d8b4c298dd128
--- /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 0000000000000000000000000000000000000000..1c2bfe4487778ebf7be4a5c45a8396baf6341136
--- /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 0000000000000000000000000000000000000000..003049bbfb285ca9394a51139e94edf9b4a6e6c0
--- /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 0000000000000000000000000000000000000000..c8929e2eff0956eccdffcb75f657b2c46bd3d463
--- /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 0000000000000000000000000000000000000000..bea16c270837f94a9ffcbea40be6479699692476
--- /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 0000000000000000000000000000000000000000..c48ac24d5615a233332cc71ea7ab28acae73f4bf
--- /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 0000000000000000000000000000000000000000..ef90f46c49df734b723c8ee6cfc0f1d60f50906e
--- /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 0000000000000000000000000000000000000000..b08b112c3ea401181c59fd0e02e07f4747dbdae5
--- /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 0000000000000000000000000000000000000000..3d4ff4ba50f22a1f23101f2a3acd58fbbc92620f
--- /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 0000000000000000000000000000000000000000..3d4ff4ba50f22a1f23101f2a3acd58fbbc92620f
--- /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 0000000000000000000000000000000000000000..27d6c79f1359cddb818128513d673efafb3c8db4
--- /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 0000000000000000000000000000000000000000..c8a24b403fec5829429b00c924b8fb1e374f2873
--- /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 0000000000000000000000000000000000000000..f9f2c52ed0d9a535936dee3c2f66a755406cbbb0
--- /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 0000000000000000000000000000000000000000..07c2f6904999873a5b821e85bf148a28c0262172
--- /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 0000000000000000000000000000000000000000..5f97995b8d6901ab2d248f2ecd01aff5ba9267b0
--- /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 0000000000000000000000000000000000000000..e3fbd20b305e26cda50d30ee8d8274acff0a72c8
--- /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 0000000000000000000000000000000000000000..ca8ba57b2aae9fd5b54d2c7525e394a168ab56cf
--- /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 0000000000000000000000000000000000000000..1908f63c31634f2df8ad9fac501527f61d699bc6
--- /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 0000000000000000000000000000000000000000..9aefcb7662697454d6ad10e3296583324ad7a540
--- /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 0000000000000000000000000000000000000000..8f1582eb3e6d8e5d019961d7afce01ae9d2ef1e2
--- /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 0000000000000000000000000000000000000000..8077507bfc98cefb01901b2316c798b86bc6acdb
--- /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 0000000000000000000000000000000000000000..275a8a0684cd67c1622e07c27192aaeb9d8bc5c7
--- /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 0000000000000000000000000000000000000000..9ef2e4fd7ac93b0a1a50d2a47e2cc9db79f0fd6f
--- /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 0000000000000000000000000000000000000000..02b2d014ea0474b50ca4b411089f5d49049eea9b
--- /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 0000000000000000000000000000000000000000..925f37b94f6ffe547afe31b528df8786facac689
--- /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 0000000000000000000000000000000000000000..718eca86ce9a4edb753c07ff52819c87481bb2c6
--- /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 0000000000000000000000000000000000000000..745f34e470fbd6977ccf5c23d6874f03c465c223
--- /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 0000000000000000000000000000000000000000..363cba74b098623fb3417914996aa2d5acf74c07
--- /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 0000000000000000000000000000000000000000..630762f7b2fe58a9c1015a4d00c5fa3a19264d55
--- /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 0000000000000000000000000000000000000000..e5fd8f0dfc430ff5a693443fad195d2d89269aab
--- /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 0000000000000000000000000000000000000000..23f0cdc9047ef67820563e361dc97697f47c929b
--- /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 0000000000000000000000000000000000000000..5f97995b8d6901ab2d248f2ecd01aff5ba9267b0
--- /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 0000000000000000000000000000000000000000..6e9fe306215598ec009690543ff8ab980fd465d8
--- /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 0000000000000000000000000000000000000000..404e5e2e0ba3081e7e7912fe490e6616fa30e446
--- /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 0000000000000000000000000000000000000000..613b241985f0eb7c7f06d32272f98a7efdd17e80
--- /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 0000000000000000000000000000000000000000..8dfdb7c8226eee784ade8caa77d86db32ec00e0e
--- /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 0000000000000000000000000000000000000000..2c16c4534164c165ee9ccc5806f3bde7d7114414
--- /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 0000000000000000000000000000000000000000..1837955ddbabc86ca26aa5145442a9770b962028
--- /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 0000000000000000000000000000000000000000..afbc2c8ff179615db33ab66beaf5af59a3a67339
--- /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 0000000000000000000000000000000000000000..7bee33d122b3c2307071381c5266b86f9be3b7f5
--- /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 0000000000000000000000000000000000000000..3aff9ef021365a6c9dfc19d0c80ceda700f1d617
--- /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 0000000000000000000000000000000000000000..ab3ff1f1bbb00b775876b41661050cbed32ac6c3
--- /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 0000000000000000000000000000000000000000..6c3a8bdf4913aa870fba9d678dabd46757a48101
--- /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 0000000000000000000000000000000000000000..c72fca649859303dbbba0ed742a71438bc2073af
--- /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 0000000000000000000000000000000000000000..308c1fdf881ab9165e94d4b8a7217fd739d9668e
--- /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 0000000000000000000000000000000000000000..448a05ebd31ab59158f584eecad43f90a76111ff
--- /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 0000000000000000000000000000000000000000..30232f0003b626c8758442ebf0db947b1e037bef
--- /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 0000000000000000000000000000000000000000..63bf86cb69f334f89f7e80476c20493c38eda100
--- /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 0000000000000000000000000000000000000000..ee3565368b896aa4828e371e699e315d30d473da
--- /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 0000000000000000000000000000000000000000..85f94f1c6cba6a7f2ab7d828c48ba5111b9229af
--- /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 0000000000000000000000000000000000000000..74fad50868d6d6bf1adb7e79b645e8ffaefa9159
--- /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 0000000000000000000000000000000000000000..41fc4e50ec8b242ea35420132e0842a869a35bd4
--- /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 0000000000000000000000000000000000000000..35379616586ec436e5541e9ba5874be9624e97a2
--- /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 0000000000000000000000000000000000000000..de60584318c8f6b793a3eb00393eb742f8b43a8b
--- /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 0000000000000000000000000000000000000000..ebaf1bb39e11c4f85060c9bb9bbc919eed3c1165
--- /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 0000000000000000000000000000000000000000..a0c3d690240feb202735624c4ec01101449d46f2
--- /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 0000000000000000000000000000000000000000..b289b3ea286e10368593344643444f4fa69914b6
--- /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 0000000000000000000000000000000000000000..572f9607d5a52df080a2989376937fe70420d283
--- /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 0000000000000000000000000000000000000000..26f058d311ac7e78fd973a8e4e07ef2115127a6a
--- /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 0000000000000000000000000000000000000000..26f058d311ac7e78fd973a8e4e07ef2115127a6a
--- /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 0000000000000000000000000000000000000000..b4086afca6d0f73cc15262bfec678ac37dec02c7
--- /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 0000000000000000000000000000000000000000..4256d048550e7ce3dc22833af6af5801a605a512
--- /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 0000000000000000000000000000000000000000..4256d048550e7ce3dc22833af6af5801a605a512
--- /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 0000000000000000000000000000000000000000..51955669c41d3eceb416f6de5446950d95f30581
--- /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 0000000000000000000000000000000000000000..b863175c8e927a339c3e86ad65e7eb29551294b3
--- /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 0000000000000000000000000000000000000000..eca6fe12c988f9f053bf584acabbcdd61a811ec0
--- /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 0000000000000000000000000000000000000000..53b13c5bb53422820c7b6fc47816c89da92b0c45
--- /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 0000000000000000000000000000000000000000..7507e78c13dbed7f3dc38f9f502bec7cc2fa9c46
--- /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 0000000000000000000000000000000000000000..ca42140150d76987571b910c69f5776c44a74f56
--- /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 0000000000000000000000000000000000000000..987da55564f1ccb0dd0d1ba385b6561fde69bce0
--- /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 0000000000000000000000000000000000000000..d2cff7d0bfe4f0381adacfeee2d462372ed523d4
--- /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 0000000000000000000000000000000000000000..a6302d9b3eb0b8d092505344dd5e873626e9259b
--- /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 0000000000000000000000000000000000000000..cbbfabd5bfca79be3af94bddbbb8ccf3a7b15d2e
--- /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 0000000000000000000000000000000000000000..009006e8be434b9a9242b5e0003250cf4b135714
--- /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 0000000000000000000000000000000000000000..5a85bee11e73fc2955c067b6f0d1b1b4e2f67c2d
--- /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 0000000000000000000000000000000000000000..3191f7c3ae8c0aee96a0b42b7ffa914c20a91841
--- /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 0000000000000000000000000000000000000000..542155904bff91c928f060da29b089868d72fc8f
--- /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 0000000000000000000000000000000000000000..71307b33f0d2966d6a219e059b27e4218ba7b6f0
--- /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 0000000000000000000000000000000000000000..abf2225dc5c34ff55a16d5ff4871fdb917370949
--- /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 0000000000000000000000000000000000000000..bc3ace744236417635c55b729c0f931d367b531a
--- /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 0000000000000000000000000000000000000000..e82298647ac61b6a31f6c07151489900d2d78852
--- /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 0000000000000000000000000000000000000000..c283f16701fad1651abf4f0e9d290d97d5e089cd
--- /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 0000000000000000000000000000000000000000..ee8c8c106b918223c39038e49f8d3eb4eb1c4215
--- /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 0000000000000000000000000000000000000000..87afe849cfc4417756af1f25d43f743f067f62dc
--- /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 0000000000000000000000000000000000000000..ab72dcccbbb1a3c545aef4af6e3d3967e5f579e3
--- /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 0000000000000000000000000000000000000000..9976f5215ccd7dcf12e32bd24c44a4e3462a14b1
--- /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 0000000000000000000000000000000000000000..745f34e470fbd6977ccf5c23d6874f03c465c223
--- /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 0000000000000000000000000000000000000000..9eb0f4f957cd05996c8d324522b26040916ac942
--- /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 0000000000000000000000000000000000000000..38efe94837cf8c5178ef137bf327aa085bedb527
--- /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 0000000000000000000000000000000000000000..b7a812e6f1f20c2cd20229471eafcd0cf6d506eb
--- /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 0000000000000000000000000000000000000000..0413d7056a70030aefd698db99e1388b1bcede63
--- /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 0000000000000000000000000000000000000000..47aae71869907bd17ac1ef884798485e182c9ee8
--- /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 0000000000000000000000000000000000000000..097e141c2eb378cc861df39f423e6e6985ce7c96
--- /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 0000000000000000000000000000000000000000..118956297f80ea5cf6af58db59d75a4d3d2cf807
--- /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 0000000000000000000000000000000000000000..e7bd8f0c057bc89afef54be2c1ff2f53aad47acd
--- /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 0000000000000000000000000000000000000000..1d3b873feac492dc3e702ccc7067a7f3429fedfb
--- /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 0000000000000000000000000000000000000000..d18e8c49d820b4b7084650b7c104c08de90e78e9
--- /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 0000000000000000000000000000000000000000..9b10eec613a95e52d1b9b1d7366e2284d8b237a3
--- /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 0000000000000000000000000000000000000000..fe1d64047ff9153207ac255b3a12f40adec4ef10
--- /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 0000000000000000000000000000000000000000..0f7403e0612d2d08ca1c005e7fea97c4f31d6dfb
--- /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 0000000000000000000000000000000000000000..5133c61c41de4e1c5a463e46c7942eb2266e968e
--- /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 0000000000000000000000000000000000000000..773d6f953c6a33f0ad4f258806d5876edeaa9340
--- /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 0000000000000000000000000000000000000000..734a326bc42d7cf67b53e6e4bc4569d2e21d5190
--- /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 0000000000000000000000000000000000000000..734a326bc42d7cf67b53e6e4bc4569d2e21d5190
--- /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 0000000000000000000000000000000000000000..2d3a159ff125bbd827c1ef10286fe2d3c71a110e
--- /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 0000000000000000000000000000000000000000..7f74bf5c4994e0ad1063d4356bb2ddec3c403421
--- /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 0000000000000000000000000000000000000000..dcbf904a6b9f263d0bdae61aaf3d3d32cbf490e1
--- /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 0000000000000000000000000000000000000000..63d7d62314458213241d081a685ae06a5da67031
--- /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 0000000000000000000000000000000000000000..e794274ee899f386e85feaf9caf4fa40c9417d07
--- /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 0000000000000000000000000000000000000000..c0511b6bec6a3ed1ac59f4311d75fef18b5f1d25
--- /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 0000000000000000000000000000000000000000..dcbf904a6b9f263d0bdae61aaf3d3d32cbf490e1
--- /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 0000000000000000000000000000000000000000..4149fac2001291ad9a4d6e5f1d69b726eebf2531
--- /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 0000000000000000000000000000000000000000..4dff90f6b2ec9511dc54c373a0d70df7d460ff36
--- /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 0000000000000000000000000000000000000000..f2e53e4e2d751dfdc2239a8902cb0ea51a6d5506
--- /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 0000000000000000000000000000000000000000..c7fc11353b9e6ca5095b731cc0e91c4cccc953b3
--- /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 0000000000000000000000000000000000000000..07c2f6904999873a5b821e85bf148a28c0262172
--- /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 0000000000000000000000000000000000000000..26717450c2216ffee544a1d1419add1ee97d8d9b
--- /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 0000000000000000000000000000000000000000..2ab4e79d21d25ab1b95356d7372d2884f6e964fa
--- /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 0000000000000000000000000000000000000000..89455355410ab95efab081433301987aa8a9bcf4
--- /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 6aa467d4437f14484782823b2639b8524f258bbf..91500c21cd67a44fda1ee3546af67530d4b96967 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 78addbe7f300568dd858332d7314c49675b737a2..1a0654ea6d08ae9c72ee8f1d64d53107f00487ec 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 6f6a81349e6fb5e8b3868f08c4f1fe3fa7530579..1e7637a829e82b2dcd059092031a24e7cabc14fc 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 b7e80554134042f5d05aec81fe5a8f6fb06a9727..3e899304ce41d218159f2d635cd3880cd20a3310 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 9b814962235c0b7175dfcfe0a895329d4acea436..ba1193546dad0662fce44cc5b3e9703a1d623a95 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 7ec3f73e6450583e03b735d28355ca9c2c038e53..e66a46b4d49cd62e9eea3fd718dffce4a3df9038 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 317e7d243fb6dd2af49bab52c5b85654b445bb21..f9def793feb2d67ce928dfe5a9c9bd985ee0f885 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>