subsection contents

Fill Pattern Editor

Use this application to design "fill patterns". Back in the days before colour monitors became the norm, computer systems used fill patterns to simulate grey tones and other pleasing effects on their "monochrome" screens. This page is a little homage to two systems in particular that I used, the Atari ST and the (pre System 7) Apple Macintosh. See below for notes.

Tested with Safari and Firefox on Mac OS X. According to Browsershots, the page loads and appears to work with Firefox, Opera, Chrome and Safari on Windows. Note that the page relies on the <canvas> tag, which is not yet supported by Internet Explorer.

Pattern Editor

Geek Zone

Encoding for current pattern:


  • Clicking on a pixel in the Pattern Editor toggles (or swaps) its colour: i.e. if it was black before, it will become white (and vice-versa).
  • There are some operations to help manipulate the pixels. These are available via buttons below the editing grid. For brief info about the various operations, let the mouse cursor hover over the buttons. A tool-tip should appear.
  • The large area to the right of the pixel grid shows the current fill pattern. The whole area is "tiled" by repeating the base 8x8 pattern in the editor.
  • The right-most section of the page has thumbnails of some pre-defined example patterns. To view or edit one of them, just click on its thumbnail. Where applicable, the origin of the pattern is shown via a tool-tip.
  • I've reproduced the Apple Macintosh fill patterns based on pictures from my old HyperCard Reference manual.
  • The Atari ST monochrome fill patterns were 16x16 pixels, rather than 8x8. In most cases the patterns could be represented using the smaller grid. I used pictures from the ST Basic Sourcebook and the DEGAS manual to reproduce the patterns.
  • The "Geek Zone" shows the encoding of the current pattern. This is a sequence of 8 integers separated by a comma. These integers represent the rows of the pattern (top to bottom). The pixels are encoded so that the left-most pixel is the least significant bit. A black pixel denotes the "on" state, and has the bit value 1. A white pixel is "off", bit value 0. If you know what you're doing, you can enter an encoding sequence in the form.

Future enhancements

  • Colour!?
  • User-definable grid size.

Last updated: May 9, 2009
Tiled View
Example Patterns

Click on a pattern below to view or edit it.

Most of these examples are based on the original Mac OS/HyperCard patterns, or the standard Atari ST fill patterns.