#!/bin/env python3

import sys
import math

def my_write( s: str ):
    sys.stdout.write(s+'\n')

WEB_WIDTH=10.5 #1920
WEB_UNITS="in"

MAX_DEPTH = 8
DEPTH_RANGE = 2 ** MAX_DEPTH
STROKE_WIDTH=10
X_WIDTH = 10.5*1200
Y_HEIGHT = X_WIDTH//10
HALF_ROW_HEIGHT = round(Y_HEIGHT/(MAX_DEPTH*4+2))
FONT_STYLE = 'font-family="monospace" font-weight="bold"'

my_write( '<?xml version="1.0" encoding="UTF-8"?>')
my_write(f'<svg width="{WEB_WIDTH}{WEB_UNITS}" height="{round(WEB_WIDTH*Y_HEIGHT/X_WIDTH,5)}{WEB_UNITS}" viewBox="0 0 {X_WIDTH} {Y_HEIGHT}" xmlns="http://www.w3.org/2000/svg">')
my_write(f'  <rect width="{X_WIDTH/(2**(MAX_DEPTH+4))}" height="{4*MAX_DEPTH*HALF_ROW_HEIGHT}" x="0" y="{HALF_ROW_HEIGHT}" fill="black" />')
my_write(f'  <text x="{X_WIDTH/(2**(MAX_DEPTH+4))}" y="{HALF_ROW_HEIGHT*MAX_DEPTH}" font-size="{HALF_ROW_HEIGHT*2}" fill="black" {FONT_STYLE}>1._</text>')

for digit in range(0, MAX_DEPTH):
    step = 2 ** (MAX_DEPTH - (digit+1))
    count = 1
    for i in range(step, DEPTH_RANGE, step*2):
        prex = round(X_WIDTH * math.log2(1+(i-step)/DEPTH_RANGE))
        startx = round(X_WIDTH * math.log2(1+(i/DEPTH_RANGE)))
        stopx = round(X_WIDTH * math.log2(1+(i+step)/DEPTH_RANGE))
        my_write(f'  <rect width="{stopx-startx}" height="{2*HALF_ROW_HEIGHT}" x="{startx}" y="{HALF_ROW_HEIGHT*(2*digit+1)            }" fill="black" />')
        my_write(f'  <rect width="{stopx-startx}" height="{2*HALF_ROW_HEIGHT}" x="{startx}" y="{HALF_ROW_HEIGHT*(4*MAX_DEPTH-2*digit-1)}" fill="black" />')
        if digit % 4 == (MAX_DEPTH-1)%4:
            my_write(f'  <text x="{(stopx+startx)/2}" y="{HALF_ROW_HEIGHT*(2*digit+2)}" font-size="{HALF_ROW_HEIGHT*1.25}" fill="white" {FONT_STYLE} dominant-baseline="middle" text-anchor="middle">{hex(count%16)[-1:].upper()}</text>')
            my_write(f'  <text x="{(prex+startx)/2 }" y="{HALF_ROW_HEIGHT*(2*digit+2)}" font-size="{HALF_ROW_HEIGHT*1.25}" fill="black" {FONT_STYLE} dominant-baseline="middle" text-anchor="middle">{hex((count-1)%16)[-1:].upper()}</text>')
            my_write(f'  <text x="{(stopx+startx)/2}" y="{HALF_ROW_HEIGHT*(4*MAX_DEPTH-2*digit)}" font-size="{HALF_ROW_HEIGHT*1.25}" fill="white" {FONT_STYLE} dominant-baseline="middle" text-anchor="middle">{hex(count%16)[-1:].upper()}</text>')
            my_write(f'  <text x="{(prex+startx)/2 }" y="{HALF_ROW_HEIGHT*(4*MAX_DEPTH-2*digit)}" font-size="{HALF_ROW_HEIGHT*1.25}" fill="black" {FONT_STYLE} dominant-baseline="middle" text-anchor="middle">{hex((count-1)%16)[-1:].upper()}</text>')



        count=count+2

#my_write('  <rect width="50000" height="500" x="50000" y="1000" fill="black" />')
#my_write('  <rect width="50000" height="500" x="50000" y="8500" fill="black" />')
#
#my_write('  <rect width="25000" height="500" x="50000" y="1500" fill="black" />')
#my_write('  <rect width="25000" height="500" x="50000" y="8000" fill="black" />')
#
#my_write('  <rect width="12500" height="500" x="50000" y="2000" fill="black" />')
#my_write('  <rect width="12500" height="500" x="50000" y="7500" fill="black" />')
#
#my_write('  <rect width="06250" height="500" x="50000" y="2500" fill="black" />')
#my_write('  <rect width="06250" height="500" x="50000" y="7000" fill="black" />')
#
#my_write('  <rect width="03125" height="500" x="50000" y="3000" fill="black" />')
#my_write('  <rect width="03125" height="500" x="50000" y="6500" fill="black" />')
#
#my_write('  <rect width="01563" height="500" x="50000" y="3500" fill="black" />')
#my_write('  <rect width="01563" height="500" x="50000" y="6000" fill="black" />')
#
#my_write('  <rect width="00781" height="500" x="50000" y="4000" fill="black" />')
#my_write('  <rect width="00781" height="500" x="50000" y="5500" fill="black" />')
#
#my_write('  <rect width="00391" height="500" x="50000" y="4500" fill="black" />')
#my_write('  <rect width="00391" height="500" x="50000" y="5000" fill="black" />')
my_write('</svg>')