Zillij

Islamic Geometry Studio
USER REFERENCE · VERSION 266 · BROWSER-BASED · SINGLE HTML FILE · NO INSTALLATION
For muqarnas glass-casting mold design — SVG output for Rhino import
Quick Start Video
The video covers the fundamentals — this document reflects the current v266 interface, including several tools added since it was recorded.

Contents

  1. 01 Quick Start Workflow
  2. 02 Interface Overview
  3. 03 Snap System
  4. 04 Add Shapes [A]
  5. 05 Select / Move [S]
  6. 06 Rotate, Orbit & Mirror a Layer
  7. 07 Connect Points [C]
  8. 08 Generate Line at Angle
  9. 09 Cut Lines [X]
  10. 10 Tile [T] — Radial
  11. 11 Tile [T] — Tessellate
  12. 12 Tile [T] — Mirror Fold
  13. 13 Finish [B] — Closed Regions
  14. 14 Finish [B] — Offset Bands
  15. 15 Layers Panel
  16. 16 Reference Image
  17. 17 Save, Load & Export
  18. 18 Clean Up
  19. 19 Keyboard Shortcuts & Navigation

01 Quick Start Workflow

Zillij follows a consistent six-stage process. Each stage is a dedicated mode — switch with the icon strip at the top of the left sidebar or with its keyboard shortcut.

  1. Add construction geometry — Place a circle at the origin (set Radius first). Add a polygon at the same centre. These form the skeleton from which pattern lines emerge. Keep them in the Construction layer (layer id 0, always present).
  2. Lock the Construction layer — Click the lock icon next to the Construction layer row so cuts and drags cannot accidentally touch it. Lower its opacity to 15–20% to keep it visible for snapping without cluttering the design view.
  3. Connect Points — Switch to a new layer. In Connect Points mode, draw design lines between intersection snap points. Enable Symmetry (Propagate to N) for live N-fold mirroring as you draw.
  4. Apply Tile symmetry — Switch to Tile mode → Radial tab, set N and click Apply to complete the rosette (or use Tessellate / Mirror Fold instead, depending on the composition).
  5. Cut Lines — Click segments to hide them. Cuts travel with the geometry through undo, redo, and saves.
  6. Finish — Switch to Finish mode. Use Close gaps then Find Closed Regions to build colour-coded tile fills, and/or the Bands tab to generate chiseled or woven divider geometry. Export SVG.
Add Shapes Lock Construction Connect Points Tile (Radial etc.) Cut Lines Finish Regions + Bands
Six-stage Zillij workflow: Add → Lock → Connect → Tile → Cut → Finish
Start simple — a single circle + hexagon at radius 100 gives you enough intersection points to build a classic 6-pointed star in under 2 minutes.

02 Interface Overview

ZILLIJ ↩ Undo · Redo ↪ ⊡Fit · Grid·Isect·Fill · Snap▾ · Dark · ?Help 0, 0 ⬡Add ↖Sel ✏Conn ✂Cut ⬡Tile ⬡Fin Add Shapes [A] ○ Circle ◡ Arc ⬡ Polygon Radius / Pts... Propagate to N Canvas · Pan: Alt+drag or middle-drag · Zoom: scroll LAYERS ● Construction Save / Load Reference Image ↓ Export SVG ✕ Clear All ▸ Clean Up
Three-zone layout: left sidebar (mode strip + context panel), canvas, right sidebar (Layers + file/export tools)

Header Bar

The header has three zones: left (logo, Undo/Redo), centre (view and snap controls, floating over the canvas), right (live cursor coordinates).

ControlFunction
↩ Undo / Redo ↪Step backward/forward through history (also ⌘Z / ⌘⇧Z / Ctrl+Y)
⊡ FitZoom to fit all geometry (also F)
GridToggle background grid display (on by default)
IsectToggle intersection point dots (off by default)
FillToggle shape fills (off by default)
Snap ▾Opens the snap dropdown — see §03
Dark / LightToggle theme. Construction lines shift between gold (dark) and dark ink (light). Preference is remembered across sessions.
? HelpOpens this reference document in a new tab
CoordinatesLive world-space cursor position, far right

Navigation

Space+drag panning from older versions of Zillij no longer works — panning is Alt+drag (or middle-mouse drag) in the current build.

03 Snap System

Every click snaps to whichever eligible target is physically nearest the cursor within the snap radius (28 screen px ÷ zoom). The active snap point is shown as a coloured ring, and a label badge near the cursor identifies the snap type.

Intersection gold ring Centre blue ring Origin teal ring Grid green ring · Midpoint orange ring
Snap target colours. All eligible targets compete on distance — nearest wins, not a fixed priority order.

Snap Toggles (header → Snap ▾)

ToggleDefaultSnaps to
OriginOnWorld origin (0, 0)
IntersectionsOnEvery shape/connector crossing in G.isects. A crossing is skipped if every edge through it is fully cut.
Shape CentersOnShape centre points, plus connector/polygon-edge midpoints
GridOffBackground grid nodes — spacing set by the Grid Size slider (10–200) in the same dropdown

Regardless of these toggles, a few targets are always considered: connector endpoints, every circle's four cardinal points (N/E/S/W), every arc's start/end points, and any manual Add Points markers.

Curve-perimeter snapping (projecting onto a circle or arc's curved edge) has no toggle — it only kicks in as a fallback when nothing else is within range, at roughly 2.5× the normal snap radius.

Add Points (Manual Snap Points)

When placing a circle, the Pts slider adds evenly-spaced snap points around its circumference (default 4). Polygons have their own equivalent, Pts/side, which adds points along each side. Both persist as manual snap targets even after the shape moves.

04 Add Shapes A

Place circles, arcs, and regular polygons that form the construction skeleton. Press A or click the first icon in the mode strip.

Shape Types

○ Circle

  • Click anywhere to place at the current Radius
  • Click-drag to draw by radius — expands live, release on a snap point to lock the exact radius
  • Diameter is echoed below the Radius slider

◡ Arc

  • Click 1: set arc centre
  • Click 2: set radius & start angle (or enable Compass mode to type/lock a radius instead of dragging)
  • Click 3: set end angle — arc closes
  • Default direction: short arc (under 180°); Shift+click the end point to force the long arc
  • Esc steps back one stage (or cancels, at step 1)

⬡ Polygon

  • Set Sides (3–64) — Angle auto-updates to that N's natural orientation
  • Adjust Angle (0°–359°) manually to rotate the polygon
  • Pts/side (0–12) places evenly-spaced snap points along each side
  • Click to place — snaps to cursor
  • Each side is placed as an individual connector line — polygon sides can be cut, extended, or deleted independently, exactly like hand-drawn connectors

Radius Control

Propagate to N

Enable this toggle to reveal an N-fold slider (2–64, default 6). Every shape you place is simultaneously duplicated at N equal rotational positions around the origin — useful for placing all petals of a rosette in one click.

← placed here 5 copies auto-added
Propagate to N=6: one click places the shape at all six rotational positions
This is different from the Orbit tool in Select mode (§06), which repeats an already-placed shape or layer rather than placing new geometry directly.

05 Select / Move S

Icon Strip

The Select panel opens with a row of icon buttons above everything else:

IconAction
⊞ Select AllSelects every layer's geometry
✕ ClearClears the current selection
⎘ DuplicateDuplicates the current selection (dimmed until something is selected)
🗑 DeleteDeletes the current selection (dimmed until something is selected)
⤡ ScaleStarts the three-click layer scale flow — see §06
↻ RotateOpens the Rotate & Repeat sub-panel — see §06
⟺ MirrorOpens the Mirror / Flip Layer sub-panel — see §06

Selection

ActionResult
Click shapeSelect single shape
Drag empty areaMarquee-select all shapes inside the rectangle
Shift+clickAdd or remove from the current selection
Double-click shapeSelect its entire layer (all shapes + connectors, recursively)
Delete / BackspaceDelete selected shapes or connectors
Right-click / EscDeselect everything and cancel any in-progress operation

Moving

06 Rotate, Orbit & Mirror a Layer

These live in Select mode, opened from the icon strip (§05). All three act on the currently selected layer, not the whole composition — for whole-canvas radial/tessellate/fold operations, use Tile mode instead (§10–12).

Rotate & Repeat panel

Two tabs:

↻ Rotate

  • Set ° (1–180, default 15)
  • ↺ CCW / ↻ CW buttons spin the layer in place by that angle
  • ↻ Rotate & Align (3-click) — click 1: pivot point on the layer; click 2: the arm point to aim; then move the mouse to rotate live and click a snap target to lock. The layer pivots so the arm lands exactly on the target.

⟳ Orbit

  • Copies slider (2–64, default 6)
  • Advanced Center X / Y fields, or use the button below to pick visually
  • ⟳ Pick Center & Orbit — click the button, then click the canvas to set the orbit centre. N−1 rotated copies are added directly to the source layer.

⤡ Scale

  • Click 1: scale centre
  • Click 2: arm point (sets reference distance)
  • Move the mouse to scale live — ratio = new distance ÷ reference distance. Click a snap point to lock.
Esc cancels any active rotate, orbit-pick, or scale operation and restores the layer to its pre-operation position.

Mirror / Flip Layer panel

Flips the selected layer across an axis, in place.

Don't confuse this with Mirror Fold in Tile mode (§12) — that tool auto-generates the reflected half of an entire composition across a movable fold axis; this one simply flips one already-selected layer in place.

07 Connect Points C

Draw design lines (connectors) between snap points. These are the visible pattern lines — separate from construction circles and polygons. Press C or click the third mode icon.

Three Sub-Modes

Sub-modeFlow
✏ DrawClick a snap point to set the start, click another to place the line. Click empty canvas (no snap badge showing) to cancel a line in progress.
✂ Align & TrimFour clicks: click two points to define a line direction (it auto-extends to the geometry bounds in both directions), then click two trim points to keep only the segment between them. Esc cancels.
↖ Select LineClick any connector to select it and open the Extend Connector panel.

Through-Line Mode

Enable Through-line mode to auto-extend a drawn line past both anchor points until it meets the outermost geometry crossing in each direction.

P1 P2 ext. ext. Click P1, then P2 — line extends to outermost geometry
Through-line: click two anchor points, line auto-extends to the outermost geometry crossing in each direction

Symmetry (Propagate to N)

Enable to draw N copies simultaneously at equal rotational positions. Set N-fold and choose All copies or Every other.

Extend Connector

Select a connector (Select Line sub-mode, or Alt+click from any Connect sub-mode) to open the Extend panel:

Line Style

08 Generate Line at Angle

A toggle inside the Connect Points panel. Draws a single connector at a precise angle offset from a reference direction.

P1 Click 1 ref start P2 Click 2 origin of new line 45° P3 Click 3 snaps to nearest isect
Three-click flow: P1 = reference start · P2 = line origin · P3 = endpoint (snaps to nearest intersection)
  1. Enable the Generate Line at Angle toggle
  2. Click P1 — reference start point
  3. Click P2 — origin of the new line
  4. Click P3 — endpoint, constrained to the set angle from the P2→P1 direction, snapping to the nearest intersection along that ray. Move the mouse to aim farther out, then click.
A 90° angle with Through-line mode gives a clean perpendicular bisector. A 60° angle on a hex grid hits all the natural rosette intersections.

09 Cut Lines X

Cuts are non-destructive. Clicking a segment adds its ID to a hidden set — it renders as a faint ghost but is excluded from region detection and Offset Bands. Click again to restore.

Basic Cutting

  1. Switch to Cut Lines mode (X)
  2. Hover a segment — it glows red and its length shows in the on-canvas banner
  3. Click to cut — the segment becomes a faint dashed ghost
  4. Click the ghost again to restore it
← cut (ghost)
Cutting edge sub-segments to reveal the star polygon pattern

Symmetric Cut

Circle / Arc Span Cuts

Clicking a circle or arc segment cuts the entire span between its two bounding intersection points, not just one chord — so a full arc section can be cleared in one click.

Measuring Segments

10 Tile T — Radial

Tile is its own top-level mode — press T or click its icon (the 7-hex flower) in the mode strip. It has three tabs: Radial, Tessellate, Mirror. Radial rotates everything on canvas around the origin; Tessellate and Mirror act on a selected layer (or the whole canvas if nothing is selected).

Radial duplicates geometry across the canvas. Apply it once you're satisfied with the base sector — save a .zillij file first if you might need to undo past other edits later.

N-fold

Set N-fold (3–64) with the slider or presets (4, 5, 6, 8, 10, 12, 24). A live readout shows degrees per copy and a common name (e.g. "60° per copy · Hexagonal").

← base sector 6-fold copies → origin
One sector + Apply at N=6 = full rosette

Preview and Apply

11 Tile T — Tessellate

Tiles the selected layer (or the whole canvas, if nothing is selected) across a repeating grid. Build one tile unit, choose a grid type, set the layout, preview, then commit.

Grid Types

GridDescription
⬜ SqRectangular rows × columns — set Step X/Y to your boundary size
⬡ HexHexagonal lattice, offset rows — Auto-detect reads a 6-sided boundary polygon
◈ RhOblique rhombus lattice — Angle° (10°–80°) shears the grid; a ◇ Diamond preset button quick-sets 45°
△ TriEquilateral triangle grid — odd rows are flipped 180°

Layout Controls

Cluster Buttons

Shown per grid type — build a small pre-arranged cluster in one click instead of tiling the whole grid:

Preview and Apply

Tessellate duplicates all geometry in the grid. Save a .zillij file before committing so you can restore the single-tile state if needed.

12 Tile T — Mirror Fold

Auto-generates the reflected half of a composition across a movable fold axis. Select a layer, position the axis, preview, then apply.

Fold Controls

This is distinct from Mirror / Flip Layer in Select mode (§06) — that tool flips one selected layer in place; Mirror Fold reflects across a positioned axis to complete a symmetric whole composition.

13 Finish B — Closed Regions

Finish mode replaces the old always-visible "Closed Regions" sidebar section — press B or click the hexagon icon (last in the mode strip). It has two tabs: Bands (opens first — see §14) and Regions. Region detection finds closed polygon faces in the visible line network and turns them into filled shapes for SVG colour export. Locked layers are excluded.

Workflow

  1. Close gaps ≤ [n] u — if endpoints are slightly misaligned, set a tolerance and click Run. The status line shows the number of open endpoints and the closest gap distance, so you can judge whether to raise the tolerance or manually connect the gap.
  2. ⬡ Find Closed Regions — detects all enclosed faces via half-edge face-walking; results appear as coloured fills on the canvas.
  3. ↻ Regroup → Update Layer — auto-groups regions by side count and similar area (tune with Max groups and Max sides), assigning matching colours to matching tile types.
  4. Manual assign — click a swatch in the region colour palette, then click any region on canvas to repaint it individually.
Region detection needs a fully connected line network. Open (dangling) endpoints cause large spurious faces. Run Close Gaps and check the open-endpoint count before Find Closed Regions.
Region types ■ pentagon (inner) ■ triangle (points) Auto-grouped by shape + size Matching groups → same colour
Region detection finds and groups closed faces — ready for SVG colour export

Other controls: Show fills toggle (on by default) hides/shows the coloured overlay without discarding the detected regions; ✕ Clear Regions removes them entirely.

Region boundaries are faceted from 72-segment chord approximations of circles/arcs — fine for fills and SVG export, but a region bounded purely by curves won't have a perfectly smooth analytic edge.

14 Finish B — Offset Bands

Generates a new band layer from your visible connectors, circles, and arcs: flanking offset lines on each side of every line, with junction geometry that varies by style. Great for the divider/relief look used in muqarnas panels. This is the default tab when you enter Finish mode.

Style

StyleProduces
Chiseled (default)Full-width bands with mitered junction facets — "chisel spokes" radiating from each junction centre to the band corners — for a beveled, 3-D relief look. No centre ridge line.
WovenRibbon-style bands (edges only, no ridge/spokes) that alternate over/under at every crossing, with the under strand gapped beneath the over strand. Width is the total strand thickness.
OutlineRibbon-style bands like Woven, but crossings pass straight through — a clean double-line trace of the network with no weave and no bevel decoration.
OverlapFull-width bands like Chiseled, plus a centre ridge line down each source connector. At simple 4-way crossings the bands' edges are drawn straight across so the two strands read as flatly overlapping; junctions with 3+ lines still get the chiseled spoke treatment.
The Width slider means different things depending on style: for Chiseled and Overlap it's the offset on each side of the centreline (so total band thickness = 2×Width); for Woven and Outline it's the total strand thickness (Width/2 per side). Switching styles at the same Width value changes the visual thickness — nudge Width after switching if needed.

Common Controls

Woven-Specific Controls

Shown only when Woven is selected:

Bands committed to a layer are plain geometry afterward — if a junction doesn't look right, switch to Cut Lines mode and trim it by hand rather than fighting the weave preview.

15 Layers Panel

Every shape and connector belongs to exactly one layer. The Layers panel (right sidebar, always visible) controls visibility, lock state, opacity, colour, and nesting hierarchy.

Layer Rows

ElementFunction
▼ / ▶ arrowExpand/collapse nested child layers (only shown if the layer has children)
Colour dotClick to open a colour picker for this layer
NameClick directly into the name to edit it — Enter or click away commits, Esc reverts
Select all geometry in this layer
👁 / ○Toggle visibility — hidden layers dim to 40% and are excluded from export and region/band detection
🔒 / 🔓Toggle lock — locked layers can't be drawn on, cut, or dragged
Duplicate the layer
Unmerge — restores a merged layer's children to the top level (only shown on rows with children)
×Delete the layer and everything in it (only shown when more than one layer exists)

Click a row to make it the active drawing layer. Shift+click rows (or use ⊕ Select layers to merge) to multi-select for merging.

Opacity

Reordering

Drag any row up or down to restack it — rows lower in the list draw on top.

Merging & Nesting

The Construction layer has id 0 and is always present first in the list — it cannot be deleted.

16 Reference Image

A collapsible panel in the right sidebar for tracing over a photo or plan. It is not saved in .zillij files — treat it as a session-only tracing aid.

17 Save, Load & Export

Save / Load (.zillij)

The native format is a .zillij JSON file capturing everything needed to restore the session exactly.

What's savedDetail
ShapesAll circles, arcs, and region fills with full properties
ConnectorsAll lines with colour, weight, layer assignment
CutsStored as world-space midpoints — survive recomputation
LayersFull hierarchy, names, colours, opacity, lock/visible state, expand/collapse
Manual snap pointsAdd Points placements
Tessellation settingsGrid type, step, cols/rows, nudge/offset values

Clear All

The red ✕ Clear All button wipes the entire canvas. It's a normal undoable action, but there's no confirmation step before it fires — save first if the current state matters.

Export SVG

↓ Export SVG opens a sizing dialog before exporting:

Save a .zillij file before any large destructive operation (Tessellate Apply, Radial Apply, Clear All). The file is small and loads instantly.

18 Clean Up

Collapsed by default in the right sidebar. Runs a single pass over whichever checkboxed operations you leave checked — use after complex tessellations to reduce vertex counts and remove artefacts.

CheckboxWhat it does
Duplicate linesRemoves connectors with identical endpoints
Short linesRemoves connectors shorter than a minimum length (field, default 2)
Isolated connectorsRemoves connectors not touching anything else
Simplify regionsRamer–Douglas–Peucker simplification on region polygon vertices (tolerance field, default 1.0)
Merge collinearGroups connectors by infinite line and merges overlapping/touching segments, including chains through junction nodes (gap field, default 2)
Orphaned snap ptsRemoves Add-Points markers no longer sitting on any circle's circumference

All are checked by default. Uncheck any you don't want, then click ◈ Run Clean Up — it runs every remaining checked operation in one pass and reports a summary.

Run Clean Up on a finished design, not mid-session — it modifies geometry in place and can shift cut positions if used before you're done editing.

19 Keyboard Shortcuts & Navigation

Mode Switching

KeyAction
AAdd Shapes
SSelect / Move
CConnect Points
XCut Lines
TTile (Radial / Tessellate / Mirror Fold)
BFinish (Regions / Bands)
FFit view to all geometry
]Collapse/expand the right sidebar
EscCancel the current step of any in-progress tool, or deselect everything if nothing is in progress

Edit

KeyAction
⌘Z / Ctrl+ZUndo
⌘⇧Z / Ctrl+YRedo
⌘A / Ctrl+ASwitch to Select mode and select everything
Delete / BackspaceDelete selected shapes or connectors
Arrow keysNudge a selected layer (Select mode), the Mirror Fold preview axis (Tile mode), or the reference image, depending on what's active. Shift = larger step.

Context-Sensitive

Key / ActionContextResult
⌥ Option+click segmentCut Lines modeCapture segment length → Radius field, switch to Add Shapes
⌥ Option+click connectorConnect mode, any sub-modeSelect the connector (opens the Extend panel)
Shift+click shape/connectorAny modeAdd to multi-selection
Shift+click arc endAdd Shapes → ArcForce the long arc (over 180°)
Shift+dragLayer selected, or arrow-nudgingConstrain to horizontal/vertical, or 10× the nudge step
Double-click shapeSelect modeSelect its entire layer
Alt/Option+drag, or middle-dragCanvasPan view
Right-clickCanvasDeselect everything, cancel in-progress operation
Scroll wheelCanvasZoom toward cursor
Single-letter shortcuts (A, S, C, X, T, B, F, and ]) are silently ignored while your cursor focus is inside any text or number field — the Radius field, a Clean Up threshold, the hex colour field, an Export dialog field, a layer name you're editing, and so on. If a shortcut stops responding, click an empty part of the canvas first to move focus off the field, then try again.