diff --git a/planning/8seg_vis.html b/planning/8seg_vis.html
new file mode 100644
index 0000000..eeeb584
--- /dev/null
+++ b/planning/8seg_vis.html
@@ -0,0 +1,195 @@
+<!doctype html>
+<html>
+    <head>
+        <title>8seg dimension planning</title>
+<style>
+canvas {
+}
+
+body {
+    margin-left: auto;
+    margin-right: auto;
+    width: min-content;
+}
+
+#form {
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
+    display: grid;
+    grid-template-columns: max-content auto;
+}
+
+#form > label {
+    text-align: right;
+    padding-right: 0.5em;
+}
+
+#form > input[type="number"] {
+    max-width: 5em;
+}
+
+</style>
+    </head>
+    <body>
+        <canvas id="viz" width="1800px" height="500px">
+        </canvas>
+        <div id="form">
+            <label for="text">Text</label><input type="text" id="text" value="Sphinx of black quartz/judge my vow"/>
+            <label for="digit_width">Digit width</label><input type="number" id="digit_width" step="0.01" value="1.0">
+            <label for="digit_height">Digit height</label><input type="number" id="digit_height" step="0.01" value="1.6">
+            <label for="digit_space">Digit spacing</label><input type="number" id="digit_space" step="0.01" value="0.4">
+            <label for="digit_num">Number of digits</label><input type="number" id="digit_num" value="36">
+            <label for="line_width">Visualization line width</label><input type="number" id="line_width", value=0.05>
+        </div>
+<script>
+
+    const seg_map = {
+        " ": 0x00,
+        "a": 0x2e,
+        "b": 0xd6,
+        "c": 0xd0,
+        "d": 0xc5,
+        "e": 0x59,
+        "f": 0x98,
+        "g": 0xd4,
+        "h": 0x8c,
+        "i": 0x5c,
+        "j": 0x78,
+        "k": 0x8e,
+        "l": 0xc0,
+        "m": 0xa3,
+        "n": 0xa5,
+        "o": 0xf0,
+        "p": 0x93,
+        "q": 0xf4,
+        "r": 0x9e,
+        "s": 0x55,
+        "t": 0xc8,
+        "u": 0xe0,
+        "v": 0x8a,
+        "w": 0xac,
+        "x": 0x0f,
+        "y": 0x0b,
+        "z": 0x5a,
+        "0": 0x13,
+        "1": 0x20,
+        "2": 0x16,
+        "3": 0x56,
+        "4": 0x23,
+        "5": 0x1c,
+        "6": 0x4e,
+        "7": 0x1a,
+        "8": 0x5f,
+        "9": 0x33,
+        "/": 0x0a,
+        "\\": 0x05,
+    };
+
+    function map_digit(codepoint) {
+        if (!seg_map.hasOwnProperty(codepoint)) {
+            return seg_map[" "];
+        }
+
+        return seg_map[codepoint];
+    }
+
+    function draw_digit(ctx, x, y, w, h, seg) {
+        for (var i=0; i<2; i++) {
+            if (i == 0) {
+                ctx.strokeStyle = '#e00000';
+            } else {
+                ctx.strokeStyle = '#404040';
+                seg = ~seg;
+            }
+            ctx.beginPath();
+            if (seg & 0x80) {
+                ctx.moveTo(x, y);
+                ctx.lineTo(x, y+h);
+            }
+            if (seg & 0x40) {
+                ctx.moveTo(x, y+h);
+                ctx.lineTo(x+w, y+h);
+            }
+            if (seg & 0x20) {
+                ctx.moveTo(x+w, y+h);
+                ctx.lineTo(x+w, y);
+            }
+            if (seg & 0x10) {
+                ctx.moveTo(x+w, y);
+                ctx.lineTo(x, y);
+            }
+            if (seg & 0x01) {
+                ctx.moveTo(x+w/2, y+h/2);
+                ctx.lineTo(x, y);
+            }
+            if (seg & 0x02) {
+                ctx.moveTo(x+w/2, y+h/2);
+                ctx.lineTo(x+w, y);
+            }
+            if (seg & 0x08) {
+                ctx.moveTo(x+w/2, y+h/2);
+                ctx.lineTo(x, y+h);
+            }
+            if (seg & 0x04) {
+                ctx.moveTo(x+w/2, y+h/2);
+                ctx.lineTo(x+w, y+h);
+            }
+            ctx.stroke();
+        }
+    }
+
+    function update() {
+        const canvas = document.querySelector("#viz");
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = '#202020';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        const digit_num = parseFloat(document.querySelector("#digit_num").value);
+        const digit_width = parseFloat(document.querySelector("#digit_width").value);
+        const digit_height = parseFloat(document.querySelector("#digit_height").value);
+        const digit_space = parseFloat(document.querySelector("#digit_space").value);
+        const line_width = parseFloat(document.querySelector("#line_width").value);
+        const text = document.querySelector("#text").value.toLowerCase();
+
+        const segs = [];
+        for (var codepoint of text) {
+            segs.push(map_digit(codepoint));
+        }
+
+        for (var i=0; i<digit_num; i++) {
+            segs.push(map_digit(" "));
+        }
+
+        const total_w = digit_num * digit_width + (digit_num - 1) * digit_space;
+        const total_h = digit_height;
+
+        const fill_factor = 0.8;
+        const scale = canvas.width * fill_factor / total_w;
+
+        var x = (canvas.width - total_w*scale) / 2;
+        var y = (canvas.height - total_h*scale) / 2;
+
+        ctx.lineWidth = scale*line_width*digit_width;
+
+        for (var i=0; i<digit_num; i++) {
+            draw_digit(ctx, x, y, digit_width*scale, digit_height*scale, segs[i]);
+            x += digit_width*scale + digit_space*scale;
+        }
+    }
+
+    function handle_change(evt) {
+        update();
+    }
+
+    document.querySelector("#digit_width").addEventListener('change', handle_change);
+    document.querySelector("#digit_height").addEventListener('change', handle_change);
+    document.querySelector("#digit_space").addEventListener('change', handle_change);
+    document.querySelector("#digit_num").addEventListener('change', handle_change);
+    document.querySelector("#line_width").addEventListener('change', handle_change);
+    document.querySelector("#text").addEventListener('input', handle_change);
+
+    update();
+</script>
+    </body>
+</html>
