catalogue, code factorisation, few bug fix

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
+
+-->

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')

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;
+}
+

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;
 }

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>

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>

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>

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>

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>

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 {