Celtic Knot Shapes: User Manual

Getting started

Celtic Knot Shapes fills an outline with woven knotwork and turns it into a 3D model you can print, cast or take into Blender. Everything happens in your browser; nothing is uploaded anywhere.

Pick a shape. Choose one of the built-in shapes, or upload or drop an SVG file of your own.
Set the size of the finished piece and the cell size, which sets how fine the knotwork is.
Shape the knot. Use a preset (One strand is a good start), then click the dots to add, turn or remove breaks.
Choose a strand style and adjust the width and heights while watching the 3D view.
Export an STL, or send the design to Blender.

Your design is remembered in this browser, so it's still there when you come back. To keep it safely or move it to another computer, use Save design to a file.

The screen

The knot drawing (left)

The flat drawing of the knot. The faint lines are the cells the knot is built on, and each dot sits where two strands cross. Clicking a dot changes the knot there (see Breaks).

Scroll to zoom, drag to move. The −, + and Fit buttons do the same.
Edit full screen makes the drawing fill the window for detailed work, with Undo, Redo and the strand count at the top. Press Done or Esc to return.

The 3D view (right)

The model as it will be exported. Drag to turn it, right-drag to move it, scroll to zoom. Reset view brings it back to the start. The 3D view updates a moment after each change.

Showing, sizing and pinning the views

Both, Drawing, 3D and Hide on the status line choose which views are shown. One view on its own takes the full width; Hide leaves more room for the controls.
Drag the short bar under the views to make them taller or shorter. Double-click it to go back to the usual height. With the bar selected, the arrow keys and Page Up/Down resize too.
Pin views keeps the views and the status line at the top of the window while the controls scroll underneath, so you can watch the result as you change settings. Turn it off to scroll the views away with the rest of the page. On a narrow screen the views are never pinned.
These choices are remembered in this browser, separately from the design.

The status line

Below the views: the number of strands (highlighted when the whole knot is one strand), crossings and cells, the finished size in millimetres, and the estimated weight and volume. Warnings appear in red underneath, for example when strands are too thin to cast or the shape breaks into separate pieces.

Undo and Redo (Ctrl+Z, Ctrl+Y) step through changes to the breaks and presets.

Shape

Upload an SVG: Click the box or drop an SVG file onto the page. Filled areas, lines, text and transforms all count as part of the shape. If the file states its size in real units (mm, cm, in), the piece is sized to match.
Built-in shapes: Celtic cross, Latin cross, Circle, Ring, Heart, Shield and Square, to try things out with.
Size (longest side): The finished size of the longest side, 10 to 200 mm.
Fill inside closed lines: For an SVG that is only an outline drawn as a line: fills everything inside it. It's switched on for you when a file looks like a line drawing.

Good shapes for SVGs are solid silhouettes. Parts narrower than about one cell get no knotwork, so very thin arms or sharp points may stay empty; a smaller cell size reaches further into them.

Panels

An SVG made of several filled shapes (say four rectangles and a circle making a cross) can have a separate knot in each shape, with a raised frame along every shape's edge, like the panels of a carved cross. The page notices the shapes when you upload the file and turns this on for you.

A separate knot in each shape: Under Shape. Turn it off to fill the whole outline with one knot as usual.
Frame between shapes: The width of the raised frame, centred on each shape's edge. It's raised to the same height as the rim, and it's what joins shapes that only just touch.
Selecting panels: Click inside a panel on the drawing (away from the dots), or on its button in the Panels list; shift-click to add or remove one. Select all selects them all; clicking outside every panel selects none. The selected panels are outlined in dashes when only some are selected.
What the selection controls: Everything under Layout (grid or fitted, cell size, gap at the outline, fill to the outline, turn gap, turns) under Breaks (presets, extra breaks, seed, New pattern, the mirrors and four-way turn) and under Strands (style, width, width of each rim, strand height, dip under crossings) applies to the selected panels only, so each can have a pattern and a look of its own. The controls show the first selected panel's settings. With no panel selected, they apply to every panel. The shape, the metal and the rest of the 3D settings belong to the whole piece and apply whatever is selected, as do Change only the dot I click and clicking dots.
Mixing styles: Panels can have different styles, Carved among them. When some panels are carved, the piece is one carved block: the other panels are flat floor on it, with their strands standing on that floor as on a backing plate, and the frame stands as high as the tallest strands. A linked group shares its pattern but not its look: each panel keeps its own style and width.
Link: Gives the selected panels one shared pattern, taken from the one highest in the Panels list. Linked panels are turned onto each other the traditional way: each one's inner end, the end facing the panel they meet at, is its foot. So a cross's arms all read outward from the middle, and a break you place in one arm appears in the same place in the others. Linked panels carry the same letter in the Panels list.
Unlink: Gives the selected panels (with none selected, all of them) patterns of their own again (starting from the one they had).
Same colour, same pattern: Shapes with the same fill colour in the SVG start out linked. In Inkscape, colour the arms alike and the circle differently, and they're set up when you upload.

Linked panels about the same size (within about 15%) share exactly the same cells, stretched to fit each one, so their patterns match to the last crossing. A linked panel of a different size, such as a longer bottom arm, matches the others from its inner end as far as they go, and the rest of it follows the same preset and seed.

The mirror options work within each panel: about its middle, or for a linked panel about its own centre line.

Layout

Knot, Spiral or None

What fills the selected panels (the whole shape, without panels). None leaves them bare: just the plate (or the carving's floor), the frame round them and any emblem. Spiral fills each with Celtic spirals in place of a knot: double-armed, as in La Tène work, the strand winding in along one arm, turning through an S at the eye and winding out along the other.

Single: one spiral, both ends trailing off its outside.
S: two spirals turning the same way, joined through the middle.
C: two spirals that are mirror images, joined by an arc over the top (along the side, in a tall panel).
Triple: three spirals round the middle, each sweeping round into the next: a triskele, one closed strand.

Turns sets how many times each spiral winds, and Size how much of the panel it fills. Taper the ends narrows the free ends of Single, S and C spirals (a Triple has none) over up to a full turn. They narrow only as far as the thin-spot limit (Thinnest allowed, under Strands) or 40% of the strand's width, whichever is more, so the tips stay strong enough to cast; a strand already near that limit hardly narrows, so widen it to see the taper. Turn, Move across and Move up place it by hand when it doesn't sit where you want it, as for an emblem (the − and + buttons nudge it a step at a time). The strands take the panel's Strands settings (style, width, height), so a spiral can be Ribbon, Rounded, Double or Carved. A warning shows when the passes come closer than the strands are wide. The cell size still sets what the strand width is measured against; the other Layout and Breaks settings are for knots.

Grid

Whole square cells, the classic scribes' layout. Curved edges come out stepped.

Fitted

The outer ring of cells bends to follow the outline, so curved edges stay smooth. Usually the better choice.

Ring

For a round band with a round hole in the middle, such as the ring of a Celtic cross: the cells go round the band in rows, like a straight plait bent into a circle. Each row is wider than the one inside it by the same ratio, so the cells stay square and only grow towards the outside; the cell size sets how many go round, and the rows follow. Any other shape gets a message asking for Fitted instead.

Repeat round the ring

Ring only: the pattern goes round this many times, every break you click (and every preset) copied to each repeat. Four lines the repeats up with a cross's arms. An odd number can come to one strand; an even number always leaves two at least, as a half turn pairs the strands off.

Cell size

The size of each square cell. Smaller cells give finer, busier knotwork with more crossings; larger cells give bolder strands. Changing it makes a new pattern from the current preset; breaks you placed by hand don't carry over to a different cell size.

Move the cells across / up

With the Ring layout there's just Turn the cells, which turns them round the ring by up to half a cell. Slides the grid of cells sideways or up and down, by up to half a cell, when the knot doesn't sit well in its shape or panel. A different set of cells then fits, so the knot changes as well as moving: a new pattern is made from the current preset. With panels, it moves the selected panels' cells, in each panel's own direction; linked panels move together.

Gap at the outline

How far from the outline the strands turn back. With Fill to the outline on, it's the space left between the strands' outer edge and the outline (or the rim); set it to zero for strands that touch.

Fill to the outline

The cells can't always reach the outline, especially with the Grid layout or round shapes, which leaves bare spaces round the edge. This stretches each strand's turn at the edge straight out until it nearly meets the outline, closing those spaces. A turn reaches at most three cells out, so a very large empty area may still show some gap; a smaller cell size helps there.

Turn gap at breaks

How much room a strand leaves where it turns back at a break.

Turns

Curved rounds every turn; Straight gives angular, key-pattern-like turns.

Breaks

Without breaks the knot is a plain plait: every strand crosses every cell edge. A break stops the strands crossing at one place and turns them back instead, and the pattern of breaks is what makes the design.

Editing by hand

Click a dot to add a break along that edge, click again to turn it across the edge, and a third time to remove it.
Shift-click changes only that one dot, even when a mirror is on.
Hovering highlights the dot you're about to change. Turn off Show dots and cells (under Strands) to see the knot clean; dots can't be clicked while they're hidden.
Hold Ctrl (⌘ on a Mac) and drag a strand to bend it: the strand follows the pointer from the point you grabbed, and the curve stays smooth either side. A crossing moves both strands through it, so the weave stays whole. Undo takes a move back, and Put moved strands back (under Breaks) undoes them all, or with panels selected only theirs. Moves stay with the design (saved files and the Blender export too) until the cells change.

Presets

Plait: Removes all breaks.
One strand: Adds breaks until the whole knot is a single unbroken strand, then adds more where they keep it that way. The traditional ideal.
Random: Sprinkles breaks without caring how many strands result.
New pattern: The next pattern of the same kind (the next seed).
Extra breaks: How many breaks the presets add.
Seed: Numbers each generated pattern, so you can go back to one you liked. Use the arrows to step through them.

Symmetry

Mirror left/right, Mirror top/bottom: Each break you click is copied across the middle of the shape. The presets follow the mirrors too.
Turn by quarters: Four-way symmetry: each break is copied round the centre in quarter turns.
Change only the dot I click: Switches the copying off for clicks, while leaving the presets symmetrical.

With mirrors on, One strand can't always reach a single strand; a few may remain. Turning the mirrors off, or trying a few seeds, usually gets there.

Strands

Ribbon: A flat-topped band with softened edges.
Rounded: A half-round, cord-like strand.
Double: Each strand is two thin rims with the middle open, like fretwork or a double-line drawing. Where a strand goes under, its rims stop at the strand on top, so the top strand's open middle stays clear. With a backing plate the plate shows through the middle; without one, a low floor joins the rims.
Carved: Flat-topped strands standing in a carved background whose sloping facets run down between them, as on a carved ring. It's one solid block rather than strands on a plate.
Width: The width of each strand in millimetres (for Carved, the width of the flat tops; about 0.3 mm suits it).
Width of each rim: Double only: the width of each of the two rims. The open middle is whatever is left between them. It keeps its proportion when you change the strand width.
Strand height: Ribbon, Rounded and Double: how tall the strands stand above the plate.
Dip under crossings: Ribbon, Rounded and Double: how far a strand drops where it passes under another (the strand on top rises slightly). Zero keeps all strands level, which suits a flat Double.
Metal: The colour of the drawing and the 3D view. To set the material used for the weight, see Weigh in below.
Colour each strand: Draws each strand in its own colour, to see how many there are and where each one runs.
Show dots and cells: Shows or hides the grid and the clickable dots.
Show thin spots: Marks what's finer than Thinnest allowed (0.5 mm to start with), in the drawing and the 3D view. Strands narrower than that, or Double strands whose rims are, turn red. A red ring goes round each place where strands run closer than that beside each other, or beside the rim, the frame or an emblem: a slot that narrow may fill in when cast or printed. Zoom in to read each gap in mm. The rim or the frame is outlined in red when it's too narrow itself. Carved strands aren't checked, since the carving is one solid. Set the limit to suit how it will be made: about 0.5 mm for casting, less for a fine resin printer. The red is only on screen; the STL and the picture are as usual.

Emblem

An emblem is a second SVG (a monogram, a cross, a star) that stands up as a solid in a panel, or in the middle of the shape without panels, with the knot woven round it. With panels it goes in the selected panels (none selected: every panel), each panel's on its own.

Add an SVG emblem: Choose the SVG. Filled shapes and lines both work; a drawing of outlines has its closed lines filled. Adding another in its place keeps the size and position.
Size: Its longest side, as a share of its panel's shorter side.
Turn, Move across, Move up: Where it sits, from the middle of its panel.
Gap round it: How far the strands keep clear of it. The knot's cells are rebuilt round it, so the strands turn back at its edge as they do at the outline.
Height: Its top, from the panel's strand tops (from the carving's tops in a Carved panel, where the carving slopes down from it as it does from the frame).
Remove the emblem: Takes it out of the selected panels.

Without a backing plate an emblem in a Ribbon, Rounded or Double panel stands on its own, joined to nothing; keep the plate on, or make the panel Carved, to hold it.

3D settings

Ribbon, Rounded and Double

Woven on the back too: Normally the strands rise and dip only on the front, and the back is flat. With this on, each strand keeps its full thickness and moves bodily up where it goes over and down where it goes under, so the back shows the interlacing too (seen from the back, the over and under are reversed, as in real weaving). Dip under crossings (under Strands) sets how far they move. It needs the backing plate off, since a plate would cover the back (with panels, it applies to the panels without one); a rim round the edge is extended down to match.
Backing plate: A solid plate in the shape of the outline under the knotwork, which also holds every strand together. With panels it's set for the selected panels, like the Strands settings: leave it off in some panels for an open, pierced look, keeping it in the others. Each panel's plate reaches halfway under the frame round it. In a panel without a plate the strands hold on only where they meet the frame; anything left loose is outlined in red, with a warning (a panel with no knot and no plate is an empty hole, and anything inside it is held only by its own frame).
Plate thickness: The thickness of that plate; with panels, the selected panels'. The front stays level, so panels of different thickness step on the back.

Carved

Flank angle: How steeply the carved facets slope down from the strand tops.
Carve depth: How deep the background is cut below the tops.
Dip under crossings: How far a strand drops where it goes under.
Base under the carving: The thickness of solid metal under the deepest cuts.

All styles

Rim round the edge: A raised border following the outline. The knotwork is fitted inside it.
Rim width: The width of that border.
Rim height: The height of the border compared with the strand tops: above zero it stands proud, below zero it sits lower.
Weigh in: The material for the weight estimate in the status line: sterling silver, 10k, 14k or 18k gold, platinum or PLA plastic. The estimate reads slightly high, because the solids overlap a little at crossings.

Saving and export

Simplify the STL: Merges the triangles of flat and gently curved parts before the STL is written, so the file is several times smaller (a Carved piece often fifteen times) while no surface moves more than Simplify within. 0.01 mm is far below what printing or casting can show. The triangle count in the status line is the 3D view's; the STL's is shown when it downloads. The first time, it needs an internet connection to load the simplifier.
Download STL: The 3D model in millimetres, for slicers, printing services and casting houses.
Copy for Blender: Copies the design to the clipboard for the Blender add-on (see below).
Download for Blender (.json): The same, as a file, if the clipboard won't carry it.
Save picture (PNG): A high-resolution picture of the knot drawing without the dots and cells.
Save design to a file: Everything about the design, including your own SVG and every break, as a file you can open again later.
Open a saved design: Loads a file saved that way. You can also drop a saved design (or an SVG) anywhere on the page.

Installing it as an app

The page can be installed, to run in its own window like any other program and to keep working without an internet connection once it has been opened once.

Chrome or Edge (Windows, Mac, Linux, Android): Use the install button at the right of the address bar, or the browser's menu: Install Celtic Knot Shapes (on Android, Add to Home screen).
Safari (iPhone, iPad, Mac): Share, then Add to Home Screen (on a Mac, File, then Add to Dock).
Opening files with it: Once installed in Chrome or Edge on a computer, SVGs and saved designs (.json) can be opened with it from your file manager: right-click the file and choose Open with, Celtic Knot Shapes. It opens the shape, or the design, in the app's window.
Updates: A new version is picked up the next time the app or page opens while online. Your designs carry over: the app and the web page share them.
Offline: Everything works without a connection, including the 3D view, simplifying the STL and the Blender add-on download. Designs stay in this browser; Save design to a file is still the safe way to keep one.

Blender

The Blender add-on builds the same design at full detail. It reports the exact weight in each alloy, and can also make a single fused solid for printing: set MAKE_PRINT_SOLID = True near the top of the script. Setting SIMPLIFY_ANGLE = 1 there merges nearly flat faces, which takes a full-detail Carved piece from millions of triangles to tens of thousands.

Download make_knot_shape.py.
In Blender, choose Edit > Preferences > Add-ons > Install from Disk and pick that file. (Or open it in the Text Editor and press Run Script.)
On the design page press Copy for Blender.
In Blender choose Add > Mesh > Celtic Knot Shape. If the clipboard doesn't hold a design, it asks for a file saved with Download for Blender.

Each run replaces the Shape_* objects made by the run before. When the page gains new features, install the add-on again so it keeps up.

Printing and casting

Keep strands at least about 0.5 mm wide for casting and most printing; the page warns you when they're thinner, and Show thin spots marks them in red. Double rims need the same care: each rim is a thin wall of its own. Narrow gaps between strands matter too: Show thin spots rings them.
Strands overlap where they cross, as separate solids. Slicers and casting services merge them; in Blender you can join them with a Union, or have the add-on make a fused print solid.
Without a backing plate or rim, check that the knot holds together. Loose pieces are outlined in red with a warning; a plate is the simplest way to make it one piece.
A piece woven on both sides has no flat face to lie on, so a 3D print of it needs supports underneath; casting is unaffected.
For a flat, fretwork look, try the Double style with a thin plate, a low strand height and no dip under crossings.

Troubleshooting

Part of my shape has no knotwork: That part is narrower than about one cell. Use a smaller cell size or a larger overall size.
My SVG's shapes don't show up as panels: Each panel has to be its own filled element (a rectangle, circle, ellipse, polygon or path); a group of them counts as its separate shapes. Several shapes combined into one path are one panel. Shapes with no fill are ignored.
Gaps between the strands and the outline: Tick Fill to the outline under Layout, and lower Gap at the outline to bring the strands closer.
"Separate pieces" warning: The shape narrows to less than a cell somewhere, so the knot falls into parts that don't join. A smaller cell size usually fixes it.
"Joined to nothing else" warning: Part of the model touches nothing else and would fall off: usually a knot in a panel without a backing plate, whose strands stop just short of the frame, or anything inside a bare panel with no plate. Each loose piece is outlined in red dashes in the drawing. Turn the backing plate on under it, or bring its strands out to touch the frame. The check goes by what touches what seen from above, so it's a guide: look at the back in the 3D view too.
"Cells squashed near the edge" warning: The Fitted layout had to squeeze some edge cells. Try a slightly different cell size, or the Grid layout.
The SVG shows as a thin outline only: Tick Fill inside closed lines.
Clicking a dot changes several: A mirror or four-way symmetry is on. Shift-click, or tick Change only the dot I click.
The 3D view stays blank: It needs WebGL and an internet connection the first time (the 3D library loads from the web). Try reloading the page.
The page opens empty from a file: It has to be served, not opened as a file: run start.sh and use the address it opens.

← Back to the design page