The grid contents appear to be 15x16 bitmap characters. I'll need the letters in BASIC, 2, =, and two arrows as well as a line for arrow continuation. I'll do these as SVG paths, which are made of commands like m(oveto x y), l(ineto x y), v(ertical lineto y), h(horizontal lineto x), c(urveto ...complicated ), and z for render. You move somewhere and then start drawing the outline of a shape. If you end somewhere other than where you started drawing, a line segment is drawn from finish to start. It's possible to turn off the fill and turn on a stroke (edge line) which allows you to test your hand-written paths, but OMG nobody does these things by hand. Inkscape isn't 100% trivial, but a blind guy can figure it out with some Internet reading. Of course, the blind guy is doing these all by hand because in THIS case, it'll be faster.
I said above the squares are 248px. The font in them appears to be a 15x16 pixel font. I work out the best way to get what I see in the scan is for pixels to be a hair taller than they are wide and figure about 10x11 looks right (I did this by making 150x176 blocks in the middle of one of the grid spaces. It looks right so we'll use it.
I think you can just draw your object's outline, then moveto an inner coordinate and draw the holes (for letters like B), but I don't try to do things like that because I'm always afraid I'm going to screw it up. Like I said, people don't do this by hand unless they're nuts.
SVG path commands come in absolute and relative forms. I've saved myself some pain doing relative (lowercase) commands since it allowed me to draw characters like arrows and = only once and then just copy and tweak. (That's how I got it done so fast!) You can see my code for the = characters here:
<!-- = -->
<path d="m976,464 m49,36 v55 h150 v22 h-150 m0,22 h150 v22 h-150 z"/>
<path d="m476,714 m49,36 v55 h150 v22 h-150 m0,22 h150 v22 h-150 z"/>
<path d="m226,964 m49,36 v55 h150 v22 h-150 m0,22 h150 v22 h-150 z"/>
<path d="m976,1214 m49,36 v55 h150 v22 h-150 m0,22 h150 v22 h-150 z" fill="#fff"/>
You can see how I used the relative moveto to simplify my life a bit. Move to the offset of the grid square (the first moveto of a path is always absolute), then move again to the character cell, then move again to the top left edge of the character. Yes, you can just add those coordinates all up, and I will. But I assume y'all know more about the TI-99/4A than I do. I don't assume y'all know SVG because it's basically freakin' encapsulated-PDF-commands-as-XML! With CSS because why not? Although, I'm not using that here.
Next I did the arrows. While the pointy bit behaves like one of the 15x16 characters, the line of the arrows extends beyond the cell and spans a second. Also, half of the arrow is always in an inverted square, and the arrow's line crosses the grid boundary as white. Some slight adjustments to geometry were necessary for this:
<!-- right arrows -->
<path d="m226,464 m49,36 m-49,55 h248 v66 h-248 z"/>
<path d="m476,464 m49,36 m60,11 h20 v11 h10 v11 h10 v11 h10 v11 h10 v11 h10 v44 h-10 v11 h-10 v11 h-10 v11 h-10 v11 h-10 v11 h-20 v-44 h-111 v-66 h111 z" fill="#fff"/>
<path d="m226,1214 m49,36 m-49,55 h250 v66 h-250 z" fill="#fff"/>
<path d="m476,1214 m49,36 m60,11 h20 v11 h10 v11 h10 v11 h10 v11 h10 v11 h10 v44 h-10 v11 h-10 v11 h-10 v11 h-10 v11 h-10 v11 h-20 v-44 h-109 v-66 h109 z"/>
<!-- left arrow -->
<path d="m726,964 m49,36 m70,11 h20 v44 h111 v66 h-111 v44 h-20 v-11 h-10 v-11 h-10 v-11 h-10 v-11 h-10 v-11 h-10 v-44 h10 v-11 h10v-11 h10v-11 h10v-11 h10 z" fill="#fff"/>
<path d="m976,964 m49,36 m-49,55 h248 v66 h-248 z"/>
You can see that paths get complicated quickly. When composing, I tend to include whitespace. I collapse it when I'm done, and have done so here for message brevity. Again, I haven't collapsed the movetos yet.
All right, no putting it off anymore. These are just long: 2 and the letters of BASIC. You have to take your time and preview often, that's all.
<!-- BASIC -->
<path d="m226,714 m49,36 m10,0 h110 v11 h10 v11 h10 v44 h-10 v11 h-10 v22 h10 v11 h10 v44 h-10 v11 h-10 v11 h-110 v-22 h100 v-11 h10 v-22 h-10 v-11 h-10 v-22 h-70 v-20 h80 v-11 h10 v-22 h-10 v-11 h-80 v132 h-20 z" fill="#fff"/>
<path d="m726,464 m49,36 m70,0 h10 v11 h10 v11 h10 v22 h10 v22 h10 v22 h10 v22 h10 v22 h10 v44 h-20 v-33 h-10 v-22 h-90 v22 h-10 v33 h-20 v-44 h10 v-22 h10 v-22 h10 v-22 h10 v-22 h10 v-22 h10 v-11 h10 v44 h-10 v22 h-10 v22 h50 v-22 h-10 v-22 h-10 v-11 h-10 z"/>
<path d="m976,714 m49,36 m40,0 h80 v11 h10 v11 h10 v22 h-20 v-11 h-10 v-11 h-60 v11 h-10 v11 h-10 v44 h-30 h120 v11 h10 v11 h10 v44 h-10 v11 h-10 v11 h-90 v-11 h-10 v-11 h-10 v-22 h20 v11 h10 v11 h70 v-11 h10 v-22 h-10 v-11 h-90 v-11 h-10 v-66 h10 v-11 h10 v-11 h10 z"/>
<path d="m476,964 m49,36 m30,0 h80 v22 h-30 v132 h30 v22 h-80 v-22 h30 v-132 h-30 z"/>
<path d="m726,1214 m49,36 m40,0 h80 v11 h10 v11 h10 v22 h-20 v-11 h-10 v-11 h-60 v11 h-10 v11 h-10 v88 h10 v11 h10 v11 h60 v-11 h10 v-11 h20 v22 h-10 v11 h-10 v11 h-80 v-11 h-10 v-11 h-10 v-11 h-10 v-110 h10 v-11 h10 v-11 h10 z"/>
<!-- 2 -->
<path d="m726,714 m49,36 m50,0 h60 v11 h10 v11 h10 v44 h-10 v11 h-10 v11 h-10 v11 h-10 v11 h-10 v11 h-10 v11 h-10 v11 h-10 v11 h80 v22 h-120 v-22 h10 v-11 h10 v-11 h10 v-11 h10 v-11 h10 v-11 h10 v-11 h10 v-11 h10 v-11 h10 v-11 h10 v-22 h-10 v-11 h-40 v11 h-10 v11 h-10 v11 h-20 v-22 h10 v-11 h10 v-11 h10 z"/>
So what do I get for my trouble?
That's not bad. Now I need some text and a TI logo for the corner. Text I did by hand. The font used is similar to Helvetica, but wider than that. I don't have Helvetica Neue Exp which is probably a better fit here, and it's not important to get this EXACTLY right, so I'm just gonna leave it at Helvetica. I should change these font specifications to CSS styles so that I can more easily specify fallbacks to Arial, Vera, FreeSans, sans-serif, etc.
<text font-size="32" font-family="Helvetica">
<tspan x="60" y="48">Texas Instruments TI-99/4A Computer</tspan>
<text font-size="60" font-family="Helvetica" font-style="italic" font-weight="bold" fill="#fff">
<tspan x="692" y="204">Beginner's</tspan>
<text font-size="60" font-family="Helvetica" font-style="italic" font-weight="bold" fill="#fff">
<tspan x="692" y="280">BASIC</tspan>
<text font-size="18" font-family="Helvetica" font-style="italic">
<tspan x="692" y="396">Step-by-step hands-on approach to learning</tspan>
<tspan x="692" y="418">the fun and power of programming</tspan>
<tspan x="692" y="440">in the Tl BASIC language.</tspan>
Looks like this:
That just leaves the TI logo. I've decided NOT to use an outline as is correct here, mostly because using a solid logo makes it easier to see when scaled. This I've just traced in Inkscape which created a crazy long af path. We don't need it, it's too long, etc. Select object, lock aspect, resize to 32 height (eh, close enough), and then simplify not so simply.
Inkscape's simplify command has a problem: It wants to replace everything with curveto. If you have nice sharp lines, it assumes you don't want those. And you don't get control over that. Literally how I did this was to duplicate the tracing, and change color of the duplicate. I put the original in black at a specific location, covered it with mostly transparent white rectangle much bigger than the TI logo (as a guard against accidentally clicking the original logo's "nodes"), and then cut the "ti" part of the path out, leaving the Texas with a big chunk missing and a new path object containing the "ti" part.
I moved the "ti" below the big safety rectangle--I didn't need it yet and repeated this process with the square part of the Texas. I selected the rest and did a simplify on it. Looked good except for one or two nodes I had to drag into shape myself. Helps if you understand Bezier curves for this. Fortunately, I do!
I grabbed the square corners object and unioned it with the Texas. The aftermath left a couple of wonky spots and a node or two that didn't need to be there. Select and delete, which broke two nodes. Select one and hit the "make corner" button (which turned one of my preserved line segments into a wonky curve), then select the two endpoints of that and hit the line segment button to fix it. The other broken node needed to be selected and hit the smooth button.
That left the "ti" part. I honestly just redid that using the draw path tool. I traced the outline of the t in line segments, turned the ones that needed to be curvy into curves, and unioned the result with the Texas. Another quick path for the "i" and an ellipse for the dot, select all three and union.
That's what "simplify" looks like if you don't want to simplify the whole thing and turn straight lines into arcs and curves. Gah. That said, once you're used to doing it it takes longer to describe than to do. If it sounds complex, it is. I'll just show the code.
<!-- TI logo -->
m 1152 , 25
c -0.6 , 2.18 3 , 2.9 3.7, 4.69
0.7 , 1.78 1.2, 3.99 3.2, 4.84
2.1 , 0.94 3.5,-2.37 5.7,-1.47
1.7 , 1.13 2.4, 3.2 3.4, 4.95
1.2 , 2.58 3 , 5.48 6 , 5.97
0.3 , 0 0.5, 0.1 0.8, 0.1
2.2 , 0.1 2 , 0 2.3,-0.37
0.4 , -0.36 -0.3,-1.2 -0.5,-2.28
-0.5 , -2.86 1.3,-5.57 3.7,-6.96
2.1 , -1.3 3.9,-1.85 5.3,-2.75
0.9 , -1.85 0.6,-5.01 0.1,-5.68
-1.2 , -0.19 -1 ,-1.67 -1.1,-2.31
-0.3 , -1.45 0.1,-3.12 -0.8,-4.36
-0.8 , -0.12 -1.8,-0.31 -2.6,-0.31
c -0.1 , 0 -0.1, 0.23 -0.1, 0.33
l -0.5 , 2.81
c 0 , 1.01 -0.6, 2.29 -0.7, 3.31
-1 , 0 -2 , 0.1 -2.9, 0.1
l -1.4 , 6.53
c -0.1 , 0.24 -0.1, 0.46 -0.1, 0.49
c 0 , 0.1 0.1, 0.14 0.2, 0.17
0.2 , 0 1 , 0 1.3,-0.15
0.2 , 0 0.3,-0.1 0.3, 0
l -0.2 , 1.06
c -0.3 , 1.74 -0.3, 1.59 -0.6, 1.7
-0.9 , 0.26 -2 , 0.41 -3.1, 0.41
-0.7 , 0 -1.7,-0.11 -2.1,-0.23
-1 , -0.28 -1.7,-0.71 -2.2,-1.61
-0.5 , -0.93 -0.3,-2.1 -0.1,-3.13
l 1.1 , -5.41
l 0.9 , -3.33
2.9 , -0.1
0.6 , -3.09
c -0.5 , 0 -0.9,-0.26 -1.2,-0.62
-1.1 , -1.53 -0.1,-4.18 -0.5,-6.33
m 13.5 , 3.76
a 1.6489, 1.6574 0 0 0 -1.6, 1.66
1.6489, 1.6574 0 0 0 1.6, 1.65
1.6489, 1.6574 0 0 0 1.7,-1.65
1.6489, 1.6574 0 0 0 -1.7,-1.66
m -2 , 4.27
-2.5 , 11.65
l 2.4 ,-11.65
Yeah. Thankfully I have a very nice little thingy that expands out the spacing like that. You can see the three pieces of the TI logo here. The Texas (with t cutout where you start seeing lineto commands in the middle), the lines at the end making the body of the i, and the thing between them which is the a(rcto) command which ... also complicated.
Only thing now missing are some XML namespaces and a metadata block. I'll just grab those from my "complete" template (as opposed to "bare" that I started from for this) and ...