How to use the Tessellation Creator

What is a tessellation?

Step 1: Click on a shape name

Tessellations are commonly created using one of three geometric shapes as a guide. Triangle, Rectangle, or Hexagon. There are also a few different ways to transform the shape in order to make a tessellation. They are called Translation,Reflection,Rotation.

Step 2: Click on an edge.

Hover your cursor over one of the edges of the shape. When you are close enough to the edge, the cursor will change to a pointer.

Click once, and a green circle should appear. This creates a draggable point (or corner) that you can use to reshape the object. I call them controls. These normally are visible only when you hover over them. There are menu buttons that allow you to see where all the controls are if needed.

Step 3: Drag a corner control.

Click and hold one of the green circles to change the shape.

You will notice that depending on which edge you are manipulating, it will cause another portion of the shape to move.

Step 4: Tessellate!

When you get the shape the way you like, click the Tessellate button.

Step 5: Save or Print

You can save your creation by clicking the Print/Save as SVG button. Your image should appear in a new window for you to either print or save to your computer as an SVG (alternatively you can just take a screenshot).SVG is a feature of HTML 5 that allows us to create vector graphics (like this tessellation creator), but is not recognised by some browsers, like Internet Explorer.

Here is an online converter to convert an SVG to another file format.

Optional: Modify the tessellation

If you are not yet satisfied with your creation you can click Modify Tessellation to bring you back to the state before you clicked Tessellate.

Optional: Change the colors

Perhaps you want to create the tessellation with different colors than the default. Perhaps four colors doesn't work as well on a shape like a hexagon. Or perhaps you don't want any colors at all! You can use the color picker to select a new color. Just hover over and click one of the color bars on the far right of the tessellation area

or click the text Add new color.

This will popup the color picker, where you can choose using several different utilities. When you have the color you want (which will appear in the lowest box, with a hash followed by six characters), click Use This Color. The color you selected will then be updated.

You can also remove colors by hovering to the right of a color box. A red X will appear. Click the red X to remove the color.

Note: you can remove all the colors, and the tessellation will still work. It should generate a tessellation with no colors, I.e. all white. You can always re-add colors.