Celtic Knots

Celtic knots are highly stylized illustrations of interweaving bands.

I became interested in Celtic knots after viewing a video showing how to draw them by hand. The technique begins with dots laid out on a square grid. Barriers are then added to the grid which form the outer border of the knot, as well as internal deflections.

A Celtic knot. The 'strands' are shown in white.
The lattice and gate structure underlying the Celtic knot.
The Celtic knot shown with the underlying lattice and gate structure that produces it. Here the separate strands of the knot are colored distinctly, showing that this knot is composed of three strands.

Create Your Own

I wanted to have a better way to generate these Celtic Knot illustrations, so I wrote a series of computer programs for generating them. My first attempt took advantage of a tile-based decomposition to create knots from smaller composite images. My more recent attempts have been with the HTML5 canvas element for dynamically generated images. The illustrations on this page were created with this program; you can try it yourself here.

Interface for my Celtic knot editor program.

Drawing

The starting layout of the knot, consisting of a lattice of dots, a border, and an internal boundary, or "gate". Note that the outer border is essentially an enclosure of "gates".
The path that the strand or strands will take is dictated by the gates. The strand typically 'travels' diagonally between the dots. Gates cause the strand to deflect and briefly travel horizontally or vertically.
In this case, the knot will be composed of a single strand. The full path is shown here.
The edges of the strand will be drawn at a constant distance on either side of the main path. Before drawing them, it is necessary to determine how the strand will cross over itself at each intersection. At each intersection, the top-left to bottom-right strand may be drawn over the bottom-left to top-right strand, or vice-versa. Either convention is acceptable, but these crossings must alternate to properly form the 'weave' of the knot.
To determine the crossings, a checkboard-like pattern can be envisioned between the diamonds formed by the dot lattice. Every crossing occurs within a diamond, and a valid weave can be formed by choosing the same strand to be on top in each like-colored diamond, and choosing the other strand in all other diamonds. For example, here the top-left to bottom-right strand is chosen to cross over in the orange diamonds, and under in the blue diamonds.
Drawing of the actual knot can now commence. Rather than drawing the actual strand, draw the negative space around it. Begin by drawing the edges of all the 'over' sections of the strand. Crossings are the trickiest part; after all of the crossings are determined, the rest of the knot can be completed by connecting the completed sections.
Here all of the edges of the strand have been drawn. Notice how the dot lattice and the gates are in the negative space between the strands.
The negative space can be completely filled in, hiding the dot lattice and gates.

There are several stylistic choices that can alter the appearance of the knot, such as how thick the strand is, whether the corners are rounded or sharp, and the smoothness of the turns of the strand. Shown here are knots generated by my programs with different choices of smoothness of the curvature of the strand, different strand widths, and different outline widths.

Knot Decomposition

My first programming attempt made use of the fact that celtic knots of this style can be decomposed into a set of 35 base tiles, or just twelve tile types with rotations: By adjoining these images together with certain restrictions, a seamless Celtic knot image can be formed:


An alternative formulation is based on a decomposition into 'diamond' rather than square tiles. Diamonds overlap one fourth of two adjacent tiles and are a more natural means of expressing the composition of Celtic knots due to there being fewer distinct diamond types and simpler restrictions regarding their placement.
A Celtic knot with a constituent tile shown in red, and an overlapping diamond in blue.

There are three diamond types: open, and horizontally- and vertically-closed. Within every diamond, strands enter and exit from the four sides. Inside the diamond, the strands may cross or deflect off of one another. Crossings occur only within open diamonds, and all internal deflections within the knot are due to horizontal or vertical closed diamonds.

One major shortcoming of the diamond decomposition becomes apparent when drawing or programming the generation of Celtic knot graphics. Diamonds do not visually align well under all combinations because the curvature of crossing and non-crossing strands exiting a diamond generally do not align well.

Connections to Graph Theory

Celtic knots are interesting for a variety of reasons. One aspect I am trying to better understand is how the number of distinct strands in the knot is determined by the placement of internal barriers, or 'gates'. Some knots are composed of a single strand, while others can be composed of many different strands. The number of gates does not necessarily indicate anything about the number of strands in the knot; the addition of gates can increase, decrease, or not change the number of strands in the knot. To study these properties and for the purposes of generating computer graphics, it is useful to model Celtic knots through the use of graphs.

The decomposition of Celtic knots into tiles can be taken further to the idea of subtiles, or the four constituent quadrants of each tile.
The dot lattice and gate structure underlying a Celtic knot with the division by tiles shown.
The subdivision of tiles into subtiles. The center of each subtile is marked in red; these will become the vertices of a graph.

The edges in the knot graph are not placed simply based on visual appearance; strict rules exist for governing which vertices should be connected. Again visualizing the layout of diamonds discussed in the drawing section, we see that each diamond determines two connections between four vertices. If the diamond is 'open', then opposite vertices are connected; if it is horizontally or vertically closed, then the horizontal or vertical pairs are connected, respectively.
Edges are added to connect the subtile vertices. These edges follow the path of the strands of the Celtic knot. This is the knot graph or strand graph.
The diamonds in the knot determine the edges in the knot graph.

Dropping the checkerboard distinction between diamonds and instead focusing on their closure type provides an alternative way of visualizing the knot structure. The diamond graph or gate graph is a separate graph from the knot graph that can be formed by taking each diamond in the graph as a vertex, and adding edges between adjacent diamonds. The vertices of this graph can be colored according to the closure type of the diamond.
The open and closed diamonds determines the actual edges in the knot graph. Diamonds are shown here colored according to whether they are open (grey), closed horizontally (blue) or closed vertically (red). The edges in the knot graph are colored similarly.
The gate graph of the Celtic knot. Here the gate graph is shown overlaid the Celtic knot; the vertices (shown as colored circles) are offset from the center of the diamonds for ease of visualization.

Celtic knots thus involve two types of graphs: the knot graph and the gate graph. The knot graph is always a 2-regular collection of cycles, and its structure is dictated by the coloring of the gate graph.
The knot graph.
The gate graph.

Computer and Technical Drawing

Drawing Celtic knots is somewhat difficult due to the self-overlapping and complex nature of the path of the strands. My strategy for generating computer graphics for these knots relies on the tile and subtile subdivision. The path of the strand enters and exists each subtile exactly once, aside from overlap due to drawing the strand with non-zero width.

A schematic of a 'corner' tile of a Celtic knot with the four subtile quadrants. Note that the path of the strands (shown in dashed orange) enters and exits each subtile exactly once.
A closeup of a subtile. Here the strand enters from the left side and exits at the bottom-right corner. Note that the path travels through the centers of the left side towards the center and smoothly changes direction toward and passes through the bottom-right corner
Another subtile. Here the strand enters from the bottom-left corner and exits at the top-right corner.

The path that the strand follows within each subtile is essentially limited to three shapes: corners, diagonal, or straight-to-diagonal; however due to rotations and reflections, there are many paths under a fixed orientation. Rather than compositing arc segments and lines to create these curved paths, I make use of use Bezier curves. Bezier curves are parametrically-defined functions whose shape is determined by a number of control points. Coding separate cases for all of the path shapes would be tedious; with Bezier curves the control points can be selected based on the entering and exiting directions of the strand, and these control points can be selected independently.
The path shapes that the strand within a subtile can adopt. The entering and exiting points of the strand are shown in blue and the Bezier spline between them is shown in dashed orange.
Comparison of Bezier curves with the same entering and mid-way control points but with three different exiting control points. Note that the curves are essentially identical near the entering control point (bottom-left) and then smoothly diverge to their respective exit control points (top, top-right, right).

Extensions and Generalizations

My recent efforts have been in extending the framework for Celtic knots to non-rectangular grids.

While computer drawing of Celtic knots is more easily accomplished in terms of the "tile" decomposition, the essential structure of the knots is more easily generalized in terms of the "diamond" decomposition. This can be seen in my knot editing program, in which the user interface for manipulating the strands is based on the diamonds -- a diamond may be clicked to add or remove gates -- but the drawing routine is as described above, and is based on tiles.

The general outline of the process is:
  1. Begin with a "premesh" graph, which defines the boundary of the knot and its interior structure.
  2. Use the premesh graph to induce a "Celtic mesh" graph. The faces of this graph are the diamonds within which the knot is drawn.
  3. Follow the same rules for drawing a Celtic knot by filling in the diamonds.
One might ask why we begin with the premesh graph only to move on to the Celtic mesh graph: can we simply begin with the Celtic mesh graph? The answer is yes, but there are reasons for following this formalism:
  • Construction of the Celtic mesh graph is non-trivial; most graphs would not satisfy the requirements.
  • The premesh graph determines the outer border of the knot and some of its key features.
  • Every valid Celtic mesh graph can be induced from a premesh graph, and so requiring that we start from the premesh graph does not diminish the possible configurations we may end up with.
Under this framework, the premesh graph can be created in a fairly unconstrained manner; there are some restrictions that produce better results, but for the most part it is a simple process. The resulting Celtic mesh graph is then guaranteed to be valid. The procedure for generating the Celtic mesh graph from the premesh graph is as follows:
  1. Add a node for each node of the premesh graph.
  2. Add a node for each face of the premesh graph.
  3. For each interior edge in the premesh graph, add a four-sided face that connects its two incident nodes and the two nodes corresponding to its incident faces.
  4. For exterior edges, follow the same procedure but append a new node for the 'exterior face' (a new node for each exterior edge).
The following figures show the premesh graph, the celtic mesh graph, and the resulting knot overlaid on top of the celtic mesh graph as well as on its own.
A premesh graph for a free-form Celtic knot.
The resulting Celtic mesh graph.
The Celtic knot that arises from the Celtic mesh graph.
The same knot, with the underlying mesh removed.

This procedure generalizes well and allows for many new knot configurations beyond that of the rectangular grid.

The Celtic knot that arises from the Celtic mesh graph.
The same knot, with the underlying mesh removed.