Tandy Coco TRS-80 HTML text mode block graphics


The Tandy Coco 8-Bit personal computer from the 1980’s uses the MC6847 Video Display Generator (VDG) chip to generate low-res block graphics. The default text mode graphics screen displays 32 characters across and 16 lines down, using 9 colours (not including the dark green colour used for reversed text characters, which represented lowercase letters).

The following TRS-80 BASIC program will output all 256 text mode graphics characters available on the Tandy Coco versions 1, 2 and 3.

10 FOR I=0 TO 255:POKE 1024+I,I:NEXT I

Rather than setting a up a real physical machine or using an emulator and typing in programs, it is possible to draw text mode graphics with a little bit of HTML and CSS.

To use the CSS in the HTML below, you only need to use the following span tag for each individual character you wish to display, replacing the xx in the class c_xx with the hex code of the character you wish to use. eg. for the letter A you would use c_41.

<span class="sprite c_xx"></span>

Because the original computer used a TV CRT rather than a monitor there was an over scan region so in addition to the characters for the 32 x 16 display area there is also some span tags using c_90 to emulate this on the edges.

Here is an example of the same output above but in HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
  margin-top: 0px; 
  margin-bottom: 0px; 
  margin-left: 0px; 
  margin-right: 0px;
  padding: 0;
}

.row {
  height: 24px;
}

.sprite {
  background: url("sprite_color.png") no-repeat;
  margin: -2px;
  padding: 0px;
  display: inline-block;

  width: 16px;
  height: 24px;
}

/* FIRST ROW */

.c_00 { background-position:    0px    0px; }
.c_01 { background-position:  -16px    0px; }
.c_02 { background-position:  -32px    0px; }
.c_03 { background-position:  -48px    0px; }
.c_04 { background-position:  -64px    0px; }
.c_05 { background-position:  -80px    0px; }
.c_06 { background-position:  -96px    0px; }
.c_07 { background-position: -112px    0px; }
.c_08 { background-position: -128px    0px; }
.c_09 { background-position: -144px    0px; }
.c_0A { background-position: -160px    0px; }
.c_0B { background-position: -176px    0px; }
.c_0C { background-position: -192px    0px; }
.c_0D { background-position: -208px    0px; }
.c_0E { background-position: -224px    0px; }
.c_0F { background-position: -240px    0px; }
.c_10 { background-position: -256px    0px; }
.c_11 { background-position: -272px    0px; }
.c_12 { background-position: -288px    0px; }
.c_13 { background-position: -304px    0px; }
.c_14 { background-position: -320px    0px; }
.c_15 { background-position: -336px    0px; }
.c_16 { background-position: -352px    0px; }
.c_17 { background-position: -368px    0px; }
.c_18 { background-position: -384px    0px; }
.c_19 { background-position: -400px    0px; }
.c_1A { background-position: -416px    0px; }
.c_1B { background-position: -432px    0px; }
.c_1C { background-position: -448px    0px; }
.c_1D { background-position: -464px    0px; }
.c_1E { background-position: -480px    0px; }
.c_1F { background-position: -496px    0px; }

/* SECOND ROW */
.c_20 { background-position:    0px  -24px; }
.c_21 { background-position:  -16px  -24px; }
.c_22 { background-position:  -32px  -24px; }
.c_23 { background-position:  -48px  -24px; }
.c_24 { background-position:  -64px  -24px; }
.c_25 { background-position:  -80px  -24px; }
.c_26 { background-position:  -96px  -24px; }
.c_27 { background-position: -112px  -24px; }
.c_28 { background-position: -128px  -24px; }
.c_29 { background-position: -144px  -24px; }
.c_2A { background-position: -160px  -24px; }
.c_2B { background-position: -176px  -24px; }
.c_2C { background-position: -192px  -24px; }
.c_2D { background-position: -208px  -24px; }
.c_2E { background-position: -224px  -24px; }
.c_2F { background-position: -240px  -24px; }
.c_30 { background-position: -256px  -24px; }
.c_31 { background-position: -272px  -24px; }
.c_32 { background-position: -288px  -24px; }
.c_33 { background-position: -304px  -24px; }
.c_34 { background-position: -320px  -24px; }
.c_35 { background-position: -336px  -24px; }
.c_36 { background-position: -352px  -24px; }
.c_37 { background-position: -368px  -24px; }
.c_38 { background-position: -384px  -24px; }
.c_39 { background-position: -400px  -24px; }
.c_3A { background-position: -416px  -24px; }
.c_3B { background-position: -432px  -24px; }
.c_3C { background-position: -448px  -24px; }
.c_3D { background-position: -464px  -24px; }
.c_3E { background-position: -480px  -24px; }
.c_3F { background-position: -496px  -24px; }

/* THIRD ROW */

.c_40 { background-position:    0px  -48px; }
.c_41 { background-position:  -16px  -48px; }
.c_42 { background-position:  -32px  -48px; }
.c_43 { background-position:  -48px  -48px; }
.c_44 { background-position:  -64px  -48px; }
.c_45 { background-position:  -80px  -48px; }
.c_46 { background-position:  -96px  -48px; }
.c_47 { background-position: -112px  -48px; }
.c_48 { background-position: -128px  -48px; }
.c_49 { background-position: -144px  -48px; }
.c_4A { background-position: -160px  -48px; }
.c_4B { background-position: -176px  -48px; }
.c_4C { background-position: -192px  -48px; }
.c_4D { background-position: -208px  -48px; }
.c_4E { background-position: -224px  -48px; }
.c_4F { background-position: -240px  -48px; }
.c_50 { background-position: -256px  -48px; }
.c_51 { background-position: -272px  -48px; }
.c_52 { background-position: -288px  -48px; }
.c_53 { background-position: -304px  -48px; }
.c_54 { background-position: -320px  -48px; }
.c_55 { background-position: -336px  -48px; }
.c_56 { background-position: -352px  -48px; }
.c_57 { background-position: -368px  -48px; }
.c_58 { background-position: -384px  -48px; }
.c_59 { background-position: -400px  -48px; }
.c_5A { background-position: -416px  -48px; }
.c_5B { background-position: -432px  -48px; }
.c_5C { background-position: -448px  -48px; }
.c_5D { background-position: -464px  -48px; }
.c_5E { background-position: -480px  -48px; }
.c_5F { background-position: -496px  -48px; }

/* FOURTH ROW */
.c_60 { background-position:    0px  -72px; }
.c_61 { background-position:  -16px  -72px; }
.c_62 { background-position:  -32px  -72px; }
.c_63 { background-position:  -48px  -72px; }
.c_64 { background-position:  -64px  -72px; }
.c_65 { background-position:  -80px  -72px; }
.c_66 { background-position:  -96px  -72px; }
.c_67 { background-position: -112px  -72px; }
.c_68 { background-position: -128px  -72px; }
.c_69 { background-position: -144px  -72px; }
.c_6A { background-position: -160px  -72px; }
.c_6B { background-position: -176px  -72px; }
.c_6C { background-position: -192px  -72px; }
.c_6D { background-position: -208px  -72px; }
.c_6E { background-position: -224px  -72px; }
.c_6F { background-position: -240px  -72px; }
.c_70 { background-position: -256px  -72px; }
.c_71 { background-position: -272px  -72px; }
.c_72 { background-position: -288px  -72px; }
.c_73 { background-position: -304px  -72px; }
.c_74 { background-position: -320px  -72px; }
.c_75 { background-position: -336px  -72px; }
.c_76 { background-position: -352px  -72px; }
.c_77 { background-position: -368px  -72px; }
.c_78 { background-position: -384px  -72px; }
.c_79 { background-position: -400px  -72px; }
.c_7A { background-position: -416px  -72px; }
.c_7B { background-position: -432px  -72px; }
.c_7C { background-position: -448px  -72px; }
.c_7D { background-position: -464px  -72px; }
.c_7E { background-position: -480px  -72px; }
.c_7F { background-position: -496px  -72px; }

/* FITH ROW */
.c_80 { background-position:    0px  -96px; }
.c_81 { background-position:  -16px  -96px; }
.c_82 { background-position:  -32px  -96px; }
.c_83 { background-position:  -48px  -96px; }
.c_84 { background-position:  -64px  -96px; }
.c_85 { background-position:  -80px  -96px; }
.c_86 { background-position:  -96px  -96px; }
.c_87 { background-position: -112px  -96px; }
.c_88 { background-position: -128px  -96px; }
.c_89 { background-position: -144px  -96px; }
.c_8A { background-position: -160px  -96px; }
.c_8B { background-position: -176px  -96px; }
.c_8C { background-position: -192px  -96px; }
.c_8D { background-position: -208px  -96px; }
.c_8E { background-position: -224px  -96px; }
.c_8F { background-position: -240px  -96px; }
.c_90 { background-position: -256px  -96px; }
.c_91 { background-position: -272px  -96px; }
.c_92 { background-position: -288px  -96px; }
.c_93 { background-position: -304px  -96px; }
.c_94 { background-position: -320px  -96px; }
.c_95 { background-position: -336px  -96px; }
.c_96 { background-position: -352px  -96px; }
.c_97 { background-position: -368px  -96px; }
.c_98 { background-position: -384px  -96px; }
.c_99 { background-position: -400px  -96px; }
.c_9A { background-position: -416px  -96px; }
.c_9B { background-position: -432px  -96px; }
.c_9C { background-position: -448px  -96px; }
.c_9D { background-position: -464px  -96px; }
.c_9E { background-position: -480px  -96px; }
.c_9F { background-position: -496px  -96px; }

/* SIXTH ROW */
.c_A0 { background-position:    0px -120px; }
.c_A1 { background-position:  -16px -120px; }
.c_A2 { background-position:  -32px -120px; }
.c_A3 { background-position:  -48px -120px; }
.c_A4 { background-position:  -64px -120px; }
.c_A5 { background-position:  -80px -120px; }
.c_A6 { background-position:  -96px -120px; }
.c_A7 { background-position: -112px -120px; }
.c_A8 { background-position: -128px -120px; }
.c_A9 { background-position: -144px -120px; }
.c_AA { background-position: -160px -120px; }
.c_AB { background-position: -176px -120px; }
.c_AC { background-position: -192px -120px; }
.c_AD { background-position: -208px -120px; }
.c_AE { background-position: -224px -120px; }
.c_AF { background-position: -240px -120px; }
.c_B0 { background-position: -256px -120px; }
.c_B1 { background-position: -272px -120px; }
.c_B2 { background-position: -288px -120px; }
.c_B3 { background-position: -304px -120px; }
.c_B4 { background-position: -320px -120px; }
.c_B5 { background-position: -336px -120px; }
.c_B6 { background-position: -352px -120px; }
.c_B7 { background-position: -368px -120px; }
.c_B8 { background-position: -384px -120px; }
.c_B9 { background-position: -400px -120px; }
.c_BA { background-position: -416px -120px; }
.c_BB { background-position: -432px -120px; }
.c_BC { background-position: -448px -120px; }
.c_BD { background-position: -464px -120px; }
.c_BE { background-position: -480px -120px; }
.c_BF { background-position: -496px -120px; }

/* SEVENTH ROW */
.c_C0 { background-position:    0px -144px; }
.c_C1 { background-position:  -16px -144px; }
.c_C2 { background-position:  -32px -144px; }
.c_C3 { background-position:  -48px -144px; }
.c_C4 { background-position:  -64px -144px; }
.c_C5 { background-position:  -80px -144px; }
.c_C6 { background-position:  -96px -144px; }
.c_C7 { background-position: -112px -144px; }
.c_C8 { background-position: -128px -144px; }
.c_C9 { background-position: -144px -144px; }
.c_CA { background-position: -160px -144px; }
.c_CB { background-position: -176px -144px; }
.c_CC { background-position: -192px -144px; }
.c_CD { background-position: -208px -144px; }
.c_CE { background-position: -224px -144px; }
.c_CF { background-position: -240px -144px; }
.c_D0 { background-position: -256px -144px; }
.c_D1 { background-position: -272px -144px; }
.c_D2 { background-position: -288px -144px; }
.c_D3 { background-position: -304px -144px; }
.c_D4 { background-position: -320px -144px; }
.c_D5 { background-position: -336px -144px; }
.c_D6 { background-position: -352px -144px; }
.c_D7 { background-position: -368px -144px; }
.c_D8 { background-position: -384px -144px; }
.c_D9 { background-position: -400px -144px; }
.c_DA { background-position: -416px -144px; }
.c_DB { background-position: -432px -144px; }
.c_DC { background-position: -448px -144px; }
.c_DD { background-position: -464px -144px; }
.c_DE { background-position: -480px -144px; }
.c_DF { background-position: -496px -144px; }

/* EIGHTH ROW */
.c_E0 { background-position:    0px -168px; }
.c_E1 { background-position:  -16px -168px; }
.c_E2 { background-position:  -32px -168px; }
.c_E3 { background-position:  -48px -168px; }
.c_E4 { background-position:  -64px -168px; }
.c_E5 { background-position:  -80px -168px; }
.c_E6 { background-position:  -96px -168px; }
.c_E7 { background-position: -112px -168px; }
.c_E8 { background-position: -128px -168px; }
.c_E9 { background-position: -144px -168px; }
.c_EA { background-position: -160px -168px; }
.c_EB { background-position: -176px -168px; }
.c_EC { background-position: -192px -168px; }
.c_ED { background-position: -208px -168px; }
.c_EE { background-position: -224px -168px; }
.c_EF { background-position: -240px -168px; }
.c_F0 { background-position: -256px -168px; }
.c_F1 { background-position: -272px -168px; }
.c_F2 { background-position: -288px -168px; }
.c_F3 { background-position: -304px -168px; }
.c_F4 { background-position: -320px -168px; }
.c_F5 { background-position: -336px -168px; }
.c_F6 { background-position: -352px -168px; }
.c_F7 { background-position: -368px -168px; }
.c_F8 { background-position: -384px -168px; }
.c_F9 { background-position: -400px -168px; }
.c_FA { background-position: -416px -168px; }
.c_FB { background-position: -432px -168px; }
.c_FC { background-position: -448px -168px; }
.c_FD { background-position: -464px -168px; }
.c_FE { background-position: -480px -168px; }
.c_FF { background-position: -496px -168px; }

</style>
</head>
<body>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_00"></span>
  <span class="sprite c_01"></span>
  <span class="sprite c_02"></span>
  <span class="sprite c_03"></span>
  <span class="sprite c_04"></span>
  <span class="sprite c_05"></span>
  <span class="sprite c_06"></span>
  <span class="sprite c_07"></span>

  <span class="sprite c_08"></span>
  <span class="sprite c_09"></span>
  <span class="sprite c_0A"></span>
  <span class="sprite c_0B"></span>
  <span class="sprite c_0C"></span>
  <span class="sprite c_0D"></span>
  <span class="sprite c_0E"></span>
  <span class="sprite c_0F"></span>

  <span class="sprite c_10"></span>
  <span class="sprite c_11"></span>
  <span class="sprite c_12"></span>
  <span class="sprite c_13"></span>
  <span class="sprite c_14"></span>
  <span class="sprite c_15"></span>
  <span class="sprite c_16"></span>
  <span class="sprite c_17"></span>

  <span class="sprite c_18"></span>
  <span class="sprite c_19"></span>
  <span class="sprite c_1A"></span>
  <span class="sprite c_1B"></span>
  <span class="sprite c_1C"></span>
  <span class="sprite c_1D"></span>
  <span class="sprite c_1E"></span>
  <span class="sprite c_1F"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_20"></span>
  <span class="sprite c_21"></span>
  <span class="sprite c_22"></span>
  <span class="sprite c_23"></span>
  <span class="sprite c_24"></span>
  <span class="sprite c_25"></span>
  <span class="sprite c_26"></span>
  <span class="sprite c_27"></span>

  <span class="sprite c_28"></span>
  <span class="sprite c_29"></span>
  <span class="sprite c_2A"></span>
  <span class="sprite c_2B"></span>
  <span class="sprite c_2C"></span>
  <span class="sprite c_2D"></span>
  <span class="sprite c_2E"></span>
  <span class="sprite c_2F"></span>

  <span class="sprite c_30"></span>
  <span class="sprite c_31"></span>
  <span class="sprite c_32"></span>
  <span class="sprite c_33"></span>
  <span class="sprite c_34"></span>
  <span class="sprite c_35"></span>
  <span class="sprite c_36"></span>
  <span class="sprite c_37"></span>

  <span class="sprite c_38"></span>
  <span class="sprite c_39"></span>
  <span class="sprite c_3A"></span>
  <span class="sprite c_3B"></span>
  <span class="sprite c_3C"></span>
  <span class="sprite c_3D"></span>
  <span class="sprite c_3E"></span>
  <span class="sprite c_3F"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_40"></span>
  <span class="sprite c_41"></span>
  <span class="sprite c_42"></span>
  <span class="sprite c_43"></span>
  <span class="sprite c_44"></span>
  <span class="sprite c_45"></span>
  <span class="sprite c_46"></span>
  <span class="sprite c_47"></span>

  <span class="sprite c_48"></span>
  <span class="sprite c_49"></span>
  <span class="sprite c_4A"></span>
  <span class="sprite c_4B"></span>
  <span class="sprite c_4C"></span>
  <span class="sprite c_4D"></span>
  <span class="sprite c_4E"></span>
  <span class="sprite c_4F"></span>

  <span class="sprite c_50"></span>
  <span class="sprite c_51"></span>
  <span class="sprite c_52"></span>
  <span class="sprite c_53"></span>
  <span class="sprite c_54"></span>
  <span class="sprite c_55"></span>
  <span class="sprite c_56"></span>
  <span class="sprite c_57"></span>

  <span class="sprite c_58"></span>
  <span class="sprite c_59"></span>
  <span class="sprite c_5A"></span>
  <span class="sprite c_5B"></span>
  <span class="sprite c_5C"></span>
  <span class="sprite c_5D"></span>
  <span class="sprite c_5E"></span>
  <span class="sprite c_5F"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_61"></span>
  <span class="sprite c_62"></span>
  <span class="sprite c_63"></span>
  <span class="sprite c_64"></span>
  <span class="sprite c_65"></span>
  <span class="sprite c_66"></span>
  <span class="sprite c_67"></span>

  <span class="sprite c_68"></span>
  <span class="sprite c_69"></span>
  <span class="sprite c_6A"></span>
  <span class="sprite c_6B"></span>
  <span class="sprite c_6C"></span>
  <span class="sprite c_6D"></span>
  <span class="sprite c_6E"></span>
  <span class="sprite c_6F"></span>

  <span class="sprite c_70"></span>
  <span class="sprite c_71"></span>
  <span class="sprite c_72"></span>
  <span class="sprite c_73"></span>
  <span class="sprite c_74"></span>
  <span class="sprite c_75"></span>
  <span class="sprite c_76"></span>
  <span class="sprite c_77"></span>

  <span class="sprite c_78"></span>
  <span class="sprite c_79"></span>
  <span class="sprite c_7A"></span>
  <span class="sprite c_7B"></span>
  <span class="sprite c_7C"></span>
  <span class="sprite c_7D"></span>
  <span class="sprite c_7E"></span>
  <span class="sprite c_7F"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<!-- -->

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_80"></span>
  <span class="sprite c_81"></span>
  <span class="sprite c_82"></span>
  <span class="sprite c_83"></span>
  <span class="sprite c_84"></span>
  <span class="sprite c_85"></span>
  <span class="sprite c_86"></span>
  <span class="sprite c_87"></span>

  <span class="sprite c_88"></span>
  <span class="sprite c_89"></span>
  <span class="sprite c_8A"></span>
  <span class="sprite c_8B"></span>
  <span class="sprite c_8C"></span>
  <span class="sprite c_8D"></span>
  <span class="sprite c_8E"></span>
  <span class="sprite c_8F"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_91"></span>
  <span class="sprite c_92"></span>
  <span class="sprite c_93"></span>
  <span class="sprite c_94"></span>
  <span class="sprite c_95"></span>
  <span class="sprite c_96"></span>
  <span class="sprite c_97"></span>

  <span class="sprite c_98"></span>
  <span class="sprite c_99"></span>
  <span class="sprite c_9A"></span>
  <span class="sprite c_9B"></span>
  <span class="sprite c_9C"></span>
  <span class="sprite c_9D"></span>
  <span class="sprite c_9E"></span>
  <span class="sprite c_9F"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_A0"></span>
  <span class="sprite c_A1"></span>
  <span class="sprite c_A2"></span>
  <span class="sprite c_A3"></span>
  <span class="sprite c_A4"></span>
  <span class="sprite c_A5"></span>
  <span class="sprite c_A6"></span>
  <span class="sprite c_A7"></span>

  <span class="sprite c_A8"></span>
  <span class="sprite c_A9"></span>
  <span class="sprite c_AA"></span>
  <span class="sprite c_AB"></span>
  <span class="sprite c_AC"></span>
  <span class="sprite c_AD"></span>
  <span class="sprite c_AE"></span>
  <span class="sprite c_AF"></span>

  <span class="sprite c_B0"></span>
  <span class="sprite c_B1"></span>
  <span class="sprite c_B2"></span>
  <span class="sprite c_B3"></span>
  <span class="sprite c_B4"></span>
  <span class="sprite c_B5"></span>
  <span class="sprite c_B6"></span>
  <span class="sprite c_B7"></span>

  <span class="sprite c_B8"></span>
  <span class="sprite c_B9"></span>
  <span class="sprite c_BA"></span>
  <span class="sprite c_BB"></span>
  <span class="sprite c_BC"></span>
  <span class="sprite c_BD"></span>
  <span class="sprite c_BE"></span>
  <span class="sprite c_BF"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_C0"></span>
  <span class="sprite c_C1"></span>
  <span class="sprite c_C2"></span>
  <span class="sprite c_C3"></span>
  <span class="sprite c_C4"></span>
  <span class="sprite c_C5"></span>
  <span class="sprite c_C6"></span>
  <span class="sprite c_C7"></span>

  <span class="sprite c_C8"></span>
  <span class="sprite c_C9"></span>
  <span class="sprite c_CA"></span>
  <span class="sprite c_CB"></span>
  <span class="sprite c_CC"></span>
  <span class="sprite c_CD"></span>
  <span class="sprite c_CE"></span>
  <span class="sprite c_CF"></span>

  <span class="sprite c_D0"></span>
  <span class="sprite c_D1"></span>
  <span class="sprite c_D2"></span>
  <span class="sprite c_D3"></span>
  <span class="sprite c_D4"></span>
  <span class="sprite c_D5"></span>
  <span class="sprite c_D6"></span>
  <span class="sprite c_D7"></span>

  <span class="sprite c_D8"></span>
  <span class="sprite c_D9"></span>
  <span class="sprite c_DA"></span>
  <span class="sprite c_DB"></span>
  <span class="sprite c_DC"></span>
  <span class="sprite c_DD"></span>
  <span class="sprite c_DE"></span>
  <span class="sprite c_DF"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_E0"></span>
  <span class="sprite c_E1"></span>
  <span class="sprite c_E2"></span>
  <span class="sprite c_E3"></span>
  <span class="sprite c_E4"></span>
  <span class="sprite c_E5"></span>
  <span class="sprite c_E6"></span>
  <span class="sprite c_E7"></span>

  <span class="sprite c_E8"></span>
  <span class="sprite c_E9"></span>
  <span class="sprite c_EA"></span>
  <span class="sprite c_EB"></span>
  <span class="sprite c_EC"></span>
  <span class="sprite c_ED"></span>
  <span class="sprite c_EE"></span>
  <span class="sprite c_EF"></span>

  <span class="sprite c_F0"></span>
  <span class="sprite c_F1"></span>
  <span class="sprite c_F2"></span>
  <span class="sprite c_F3"></span>
  <span class="sprite c_F4"></span>
  <span class="sprite c_F5"></span>
  <span class="sprite c_F6"></span>
  <span class="sprite c_F7"></span>

  <span class="sprite c_F8"></span>
  <span class="sprite c_F9"></span>
  <span class="sprite c_FA"></span>
  <span class="sprite c_FB"></span>
  <span class="sprite c_FC"></span>
  <span class="sprite c_FD"></span>
  <span class="sprite c_FE"></span>
  <span class="sprite c_FF"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<!-- -->
<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_4F"></span>
  <span class="sprite c_4B"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_60" id="cursor"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>
  <span class="sprite c_60"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<div class="row">
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>

  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
  <span class="sprite c_90"></span>
</div>

<script>
var el = document.getElementById("cursor");
var delay = 100;

var counter = 0;
var myVar = setInterval(myTimer, delay);

var classes = [
  "c_8F",
  "c_9F",
  "c_AF",
  "c_BF",
  "c_CF",
  "c_DF",
  "c_EF",
  "c_FF"
];

// cursor
function myTimer() {

  el.classList.remove(classes[counter]);

  counter++;
  counter %= 8;

  el.classList.add(classes[counter]);
}

</script>

</body>
</html>

This method makes use of the image generated from the BASIC program above as a sprite sheet.

sprite_color.png

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s