Editor user guide

The Tessella editor is a tessellation designer that runs in your browser. This guide mirrors the in-app Guide popup so you have the same reference whether you are at the canvas or away from it. Icons, keyboard shortcuts, and menu paths are written exactly as they appear in the editor.

The editor has two adding modes — Add (outside) grows the tiling at its boundary, Add (inside) fills an existing polygon with smaller regular ones. Most actions are mode-agnostic; the mode is called out where it matters.

Creating a tiling

• The editor has two adding modes. Add (outside) grows the tiling by attaching polygons to its boundary; Add (inside) fills an existing polygon with smaller regular ones.
• To start a new tiling, pick a polygon shape from the palette. It is placed on the canvas.

Adding regular polygons (outside)

• Pick a shape from the palette and drag it onto the canvas, or click any boundary edge to attach the shape there.

Adding regular polygons (inside)

• Click the icon to enter Add (inside) mode.
• Drag a shape from the palette onto an existing polygon, or click a polygon to highlight its edges, then click an edge to attach the chosen shape.

Adding irregular polygons

• Pick the irregular shape from the palette, just like a regular one.
• Click the ↺ button on the top-right corner of the palette item to shift the attaching edge.
• Use the Shape and color picker tool to copy the shape (and fill colour) of an existing irregular polygon.

Fanning

• Use the Fan tool to add rotated copies of the tiling around a boundary vertex.
• Click a polygon to highlight its boundary vertices, then click one. As many copies as fit are added, up to a full circle.

Selecting

• In Add (outside) mode, click any polygon to select it.
• Use the Select all button to select every polygon.
• Use the Deselect all button — or press Esc — to clear the selection.
• Use the Select button at the bottom of the palette to select all regular polygons of the same shape.
• Use the Select by color tool to select all polygons sharing the same fill colour.

Deleting

• Use the Eraser tool to remove a vertex, an edge, or a whole polygon.
• Click a polygon to highlight its vertices, mid-edge points, and centre, then click the item you want to remove.

Doubling and mirroring

• Use Edit → Double to infinite or press D to double the entire tiling. This works only when the boundary is a parallelogon (a polygon whose opposite sides are equal and parallel), so the doubled copies could tile the infinite plane.
• Use Edit → Mirror to switch to a mirror image of the tiling.

Styling

• In Add (outside) mode, select one or more polygons, then click the colour button or use Edit → Fill color to open the colour picker.
• The chosen colour applies to the current selection and to any polygon you add next.
• Use the Color picker tool to copy the fill colour from an existing polygon.
• Use the Shape and color picker tool to copy both the shape and the fill colour.

Visual options

• View → Show labels shows the node label (unique number) of each vertex of the underlying graph.
• View → Show uniformity marks nodes that share the same adjacent pattern.
• View → Show rotation shows the rotation axes that divide the tiling into identical rotated parts.
• View → Show reflection shows the reflection axes that divide the tiling into mirrored halves.

Measurement

• By design, every polygon side has unit length 1 (or an integer multiple of it).
• Use the Measurement tool to measure unit distances and angles between key points (vertex, mid-edge, centre).
• Click a polygon to highlight its key points; click one to set the (green) start, and click another to set the (red) end. The unit distance is displayed above the top-right corner of the canvas.
• Click another key point to choose a new (red) end. The angle between the previous and current end points is shown as an arc, with its measure in radians.

Navigating the canvas

• Pan: click and drag the canvas background (or drag with one finger on touch devices).
• Zoom: scroll the mouse wheel, pinch on a touch device, or press + / -.
• Rotate: press E (left) or R (right).
• Fit: use the Fit button or press F to fit the entire tiling in view.
• Reset: View → Reset view returns to the default position, zoom, and rotation.

Saving and loading

• Use the File menu to save your work as an SVG (Save SVG or Save SVG as…) or to load a previously saved SVG tiling.
• The tiling’s topological structure can also be exported as a DOT graph, in the Graphviz .gv format.

Validation rules

• An added polygon must not cross the boundary or another polygon, so the result stays a proper edge-to-edge finite tessellation (every edge is shared by exactly one or two polygons, with no overlaps).
• When you remove a polygon, the editor checks that the remaining tiling still has a single, non-self-intersecting boundary.