vector.ma Blog
← All articles

Zellige patterns: the geometry behind Morocco's iconic tiles

How Moroccan zellige stars and grids are built with a compass and a ruler, how to draw one in vector, and free zellige patterns to download.

· 4 min read

Repeating zellige pattern of green, blue and ochre eight-point stars on a cream background

Walk into a riad in Fez, the courtyard of a madrasa or the Hassan II Mosque in Casablanca, and the walls seem to move: stars inside stars, spreading in every direction without ever breaking the rhythm. That is zellige (also written zellij, in Arabic الزليج), the hand-cut tilework that has become one of the strongest symbols of Moroccan design.

Behind its beauty there is no magic, only geometry. Once you understand a few rules, you can read any zellige wall, and draw your own patterns in vector.

What zellige is

Zellige is a mosaic made of small pieces of glazed terracotta. Craftsmen glaze square tiles in a few colors, then cut each piece by hand with a sharp hammer into precise shapes: stars, crosses, almond shapes, small triangles. The pieces are laid face down following the design, then bound together with mortar into panels that are fixed on walls, floors and fountains.

Each piece is cut by hand, so the surface is never perfectly flat: light catches every tile at a slightly different angle. That is why real zellige shimmers, and why it is impossible to fake with printed tiles.

Fez is the historical center of the craft, and its clay is still the reference. The art reached a high point under the Marinid dynasty: the Al-Attarine Madrasa (1320s) and the Bou Inania Madrasa (1350s) in Fez are covered with some of the finest examples. Later, the Saadian Tombs in Marrakech (16th century) and, in our time, the Hassan II Mosque (1993) carried the tradition forward. A master of the craft is called a maâlem.

The geometry: everything starts with a circle

Every zellige pattern is drawn with only two tools: a compass and a straightedge. No measurements, only proportions.

  1. Draw a circle. It sets the size of the motif.
  2. Divide it into equal parts. Divide it in 8 and you get the eight-point star, the most common motif. Divide it in 12, 16 or 24 and you get the larger stars of palaces and mosques.
  3. Connect the points. Lines joining the divisions create stars and polygons.
  4. Repeat on a grid. The motif is copied on a square grid (for 8-fold stars) or another grid, and the shapes between the stars (crosses, octagons, “almonds”) appear by themselves.

The eight-point star, called khatem (seal), is the easiest place to start. It is just two squares on top of each other, one turned by 45°:

Three steps: a square in a circle, the same square turned 45 degrees, then both merged into an eight-point star

Because the pattern is built on a grid, it can repeat forever in every direction. In Islamic art, this endless repetition is often read as a picture of the infinite.

Draw a zellige star in vector, step by step

You can do this in Illustrator, Inkscape (free), Figma or Affinity Designer. The steps are the same everywhere:

  1. Draw a square of 100 × 100 px. Hold Shift to keep it square.
  2. Duplicate it in place (Ctrl/Cmd + C, then paste in front).
  3. Rotate the copy by 45° around its center.
  4. Merge both shapes with Unite (Illustrator: Pathfinder; Inkscape: Path > Union; Figma: Union selection). You now have an eight-point star.
  5. Add depth: duplicate the star, scale it to 65% and give it another color. Repeat with a smaller one. Stars inside stars are what makes it feel like zellige.
  6. Make the tile: place the star in the middle of a 200 × 200 px square, and quarter stars in each corner, so the edges match.
  7. Repeat it: save the tile as a pattern swatch (Illustrator: Object > Pattern > Make), or simply duplicate it on a grid.

Tip: keep the tile size and the star sizes in simple ratios (half, a quarter). Zellige looks right because every shape follows the same proportions.

Traditional colors

Classic zellige uses a small palette that comes from the natural glazes available to craftsmen: white, green, blue, ochre yellow, and black or dark brown for outlines, with red appearing in some pieces. A cover like the one at the top of this article uses only four colors, and it is enough.

For a modern design, start from that palette and change one thing: deeper greens for a premium brand, softer pastels for a café, or a single color on white for a minimal look.

Using zellige in a logo or a design

Zellige is a fast way to say “Moroccan”, but it can easily become a cliché. A few rules that work:

  • Use one motif, not a whole wall. In a logo, one eight-point star or a fragment of the pattern says enough.
  • Test it small. A detailed star becomes a blur at 32 px. Simplify until it still reads as a favicon.
  • Keep it in the background. In packaging and posters, a pattern at low contrast behind the text adds identity without fighting the message.
  • Respect the geometry. Stretched or uneven stars are noticed immediately by Moroccan eyes. Build them from squares and circles, as above.

Free zellige vectors on Vector.ma

You don’t have to start from zero. Moroccan designers share zellige patterns on Vector.ma, ready to use and edit:

Or browse every zellige vector. Drawn your own pattern after reading this? Share it on Vector.ma so other designers can find it.