Help

What are you making?

Every pattern is a grid of colored cells. What a cell is depends on the craft you pick when you start one, and that is also what decides the grid sizes on offer and which panels you get.

• Fuse beads: one cell is one bead on a pegboard. 29 by 29 is one standard board, 58 is four of them.
• Cross stitch: one cell is one stitch, so patterns go much larger, up to 100 by 100.
• Brick mosaic: one cell is one 1 by 1 plate. 48 by 48 is one standard baseplate.
• Knitting colorwork: one cell is one stitch. Enter your gauge, the stitches and rows in 10 cm, and every stitch is drawn that shape, wider than tall, so the chart looks like the knitting. The build guide reads it the way knitters do: from the bottom, right-side rows right to left, or every round right to left in the round. The materials tab says how many colours a row takes and how far a strand is carried behind the work, and which rows to catch a long float on. Six charts to start from are on the samples page.
• Diamond painting: one cell is one drill on a sticky canvas, four to a centimetre. 120 by 160 is a 30 by 40 cm kit, up to 200 cells. The colours are matched to DMC numbers, which is how drills are sold, and the chart gets a symbol per colour.
• Clay cane: one cell is a rod of clay in a bundle that is pulled thinner and sliced. Only this one gets the reduction preview and the clay weights.
• 3D bricks: a model built a layer at a time, one cell a 1 by 1 brick. Each layer is drawn on its own grid and the model is turned round in 3D; see below.

Change grid switches the craft later too: the pattern is kept and moved to the nearest grid the new craft uses, and undo puts it back.

Beads, cross stitch and bricks can be longer one way: pick the width and the height apart, for two bead boards end to end, a bookmark or a picture to frame. A cane stays square or round, because its preview and its clay are worked out for that.

Getting started

1. Open the Editor. A 12 by 12 square clay cane is ready; use New pattern to pick a craft and a grid. In a hurry, open a sample instead and change it.
2. Pick a color in the palette and draw on the canvas with a mouse, a finger, or a pen. The eraser clears cells, fill floods a connected area, and the eyedropper picks a color from the canvas. Line and Rectangle draw a straight line or a rectangle's edge as you drag, and set it down when you let go. On a phone, Undo and Redo lead the tool strip. Undo keeps working after the page reloads, until the tab is closed.
3. In a cross stitch pattern, Backstitch draws the outlines: drag from one corner of a cell to another and a line goes down in the color you have picked, along an edge, across a cell or straight over several. Tap a line, or right-click it, to take it out. With the keyboard the arrows move between holes, Space held while moving or Enter at each end lays a line, and Delete takes one out. The materials tab lists the thread each color of outline takes.
4. Turn on Mirror H or Mirror V to draw symmetric patterns, which most of these are. Flip H and Flip V mirror the whole pattern once.
5. On a large grid, zoom in: pinch with two fingers (two fingers also pan), hold Ctrl and scroll, or use the zoom buttons in the corner of the canvas. Drawing works the same while zoomed.
6. Add, rename, or recolor palette colors. Removing a color that is in use asks first and clears those cells; undo brings them back. Merge into another color paints a color's cells in another and takes it out, for two near shades a photo brought in.
7. Your work is saved on this device as you draw and reopens when you come back. New pattern starts another one; both stay in My projects.

3D bricks, a layer at a time

A 3D brick model is drawn as a stack of layers. Each layer is a grid seen from above, one cell to a 1 by 1 brick, and the bottom of the grid is the front of the model.

• The layer bar over the canvas moves up and down the layers, as do Page Up and Page Down. The layer below shows faintly, so a wall can be lined up on it, and Copy layer below starts a layer as a copy of the last one. Layer options makes the layer a plate high instead of a brick, a third of the height, for floors, roofs and gentle slopes, or tiles, plates with no studs, for a smooth top (bricks put on tiles have nothing to hold them, so the build guide, the print and the 3D view point them out), or slopes, which turn the layer's open edges into 45° slope bricks for a roof, or cheese slopes, a layer two plates high with 1 x 1 slopes on its open edges; it also puts an empty layer in above or below the one being drawn, or a copy of it a stud in on every side, or at the front and back or the sides only for a gable, above it for the next course of a roof, or takes it out, and the layers above move with it. One undo puts any of it back.
• On a slope or cheese layer, arrows on the canvas show which cells will be slopes and which way each falls, as they are drawn, and the build guide and the print show the same arrows. A color pressed under Keep square in Layer options stays bricks on every slope layer, for a chimney or a tree standing on a roof. Build here, in the 3D view, lets a click build where it lands: the pencil puts a brick on the face clicked, the eraser takes the brick clicked away, and the eyedropper picks its color. A box shows where before you click, and each click is one step to undo. With the keyboard, the arrows move the box across the layer being drawn, Page Up and Page Down change the layer, Enter or Space builds there, and Shift with the arrows turns the view.
• The 3D view shows the model on its baseplate with the layer being drawn outlined. Drag to turn it round, scroll or pinch to zoom, and drag with the right button or two fingers to move it. Front, Side, Top and Corner swing it round in one press, and a double-click fits it in the view again. Up to this layer leaves off the layers above, to see inside.
• On a computer the layer and the model sit side by side, or one over the other on a narrow screen, and Layer, Both and 3D choose between them. On a phone the model has a 3D tab of its own.
• The build guide goes a layer at a time from the bottom, with each brick outlined on the plan. Every other layer is split from the opposite corner, so the joints overlap the way a builder would lay them. The materials tab lists the bricks with LEGO colour numbers, and the size of the finished model, and a brick model or mosaic can be downloaded as a BrickLink wanted list to order the parts in one go. While the build guide is open, the screen stays on where the browser allows it.
• A browser that cannot draw 3D shows the model from a corner instead, with buttons to turn it a quarter at a time.

A model is 8 to 48 cells each way and 4 to 48 layers high. Change grid turns a model into a flat pattern of what it looks like from above, and a flat pattern into the bottom layer of a model. A photo makes a model as a wall standing on the front of the baseplate, a layer for every row of the picture. Twenty-three models to start from, the Seokgatap pagoda and Namsan Tower among them, are on the samples page, where each turns round in 3D before you open it.

Keyboard shortcuts

P, E, F, I

Pencil, Eraser, Fill, Eyedropper

L, R

Line, Rectangle

Arrow keys, Space, Enter

On the canvas: move a cell; hold Space to draw while moving; Enter for one cell

B

Backstitch, in a cross stitch pattern

Arrow keys, Space, Enter, Delete

With Backstitch: move between holes; hold Space while moving, or press Enter at each end, to lay a line; Delete takes out the line at the hole

G

Show or hide the grid lines

Page Up, Page Down

The layer above, the layer below, in a 3D brick model (or ] and [)

H, V

Mirror drawing left-right, top-bottom

Ctrl+Z, Ctrl+Y

Undo, redo (Cmd on a Mac)

Right mouse button

Erase while dragging

Import a photo

1. Open Import a photo and choose a PNG, JPEG, WebP, or HEIC (Safari only) file up to 20 MB. The photo never leaves your device.
2. Drag the picture to move the crop and zoom in on the part you want. The overlay shows where the cells will fall.
3. Pick the craft, the grid size, and how many colors to keep. Fewer colors are easier to build. Sharp keeps thin lines; Smooth blends each cell. Except for a cane, the width and the height are picked apart and the crop takes their shape; Match the photo picks the height that fits the whole picture. A knitting chart takes your gauge, and is cut as tall as it will knit. 3D bricks stand the photo up as a wall one brick deep: the height is in layers, and a brick is a little taller than it is wide, so the crop is too.
4. For beads, cross stitch, diamond painting and bricks, Colors from picks a maker, and every color becomes one that maker sells, so what you see is what you buy; The photo's own keeps the photo's colors. A pixel art picture, even one saved enlarged, is found by itself and comes in a pixel to a cell, see-through pixels left empty, with no crop. Shading, Mixed in dots, shows a gradient with few colors by mixing them, at the cost of single beads or stitches scattered to place.
5. Check the preview and the generated palette, then use the pattern. It opens in the editor for hand fixes, and the palette names help with the build guide later.

Tips on which pictures work and which size to choose are in Turn a picture into a pattern.

Build it

Open the Build tab in the editor. Every row is grouped into runs of the same color, so "Green x 5, White x 2, Green x 5" is one row laid left to right: five beads, two, five, or the same in stitches, plates, or clay rods.

1. Step shows one row at a time with the row highlighted on the pattern, so you always know where you are. Previous and Next move between rows.
2. Tick "Row built" (or use Mark done and continue) as you finish a row. Progress is saved with the cane and is there when you come back.
3. All rows lists the whole cane at once; tap a row to jump to it in Step.
4. Changing the grid size starts the progress over, because the rows are no longer the same rows.

The Materials tab counts the cells of each color and its share of the pattern, so you know how much clay of each color to mix before you start.

For beads, cross stitch and bricks it also says how big the piece comes out: in midi and mini beads, on each count of Aida, or in plates, whose studs sit 8 mm apart. The same sizes are printed with the build guide.

Add a cane size there and the shares become grams. Enter how wide the finished cane will be, how long, and your clay's density, and each color gets a weight you can put on a scale, along with the rod each cell is made from. Grams are an estimate: density changes with the brand, so weigh a block and divide the grams by its size in cm3 for yours. The size is saved with the cane and printed on the build guide, and once the Preview tab has a reduction set, the panel also says how long the cane becomes when you pull it.

Preview the reduction

The Preview tab shows the cane face before and after reducing, side by side. Move the Reduction slider (or tap 75%, 50%, 25%, 10%) and pick how you plan to pull the cane:

• Uniform: an even pull. The pattern mostly keeps its shape and softens a little.
• Hand squeeze: fingers press two sides at a time, so the face goes lumpy and off-round.
• Rolling: rolling on a slab makes the cane round and drags the outside around.

The panel opens at half, where the difference is easy to see; Reset to defaults puts it back and forgets the settings. What you set is saved with the cane.

This preview is a visual approximation, not a simulation of real clay. It is there to build intuition about what reducing does to a pattern, not to predict your cane.

Projects, export, and sharing

My projects holds every cane you have made. They live in this browser on this device: there is no account and nothing is uploaded. Clearing the browser data for this site deletes them, so export anything you want to keep.

• Open a cane by tapping its card. Rename, duplicate, or delete it with the buttons under it. Undo brings a deleted one back until you leave the page.
• Export file writes a .dot.json with everything in it: pattern, palette, reduction settings, and build progress. Import file reads one back, next to the canes you already have.
• Export PNG saves the pattern as an image. Empty cells stay transparent.
• Export all on My projects writes every cane into one backup file. Import file takes it back: canes you no longer have are added, older copies are replaced by newer ones, and the rest are left alone. Keep a backup somewhere safe; a browser can clear its storage.
• Print in the Build tab prints the guide on paper: the pattern, the clay per color, and every row with a box to tick. A QR code in the corner holds the pattern's share link, so a phone pointed at the paper opens the same pattern.
• Share, in the tools or at the bottom of the screen on a phone, and on each pattern in your projects, makes a picture of the pattern with its name and where it was made, and hands it to your phone's share sheet with a link, ready for a chat or a cafe post. On a computer it saves the picture instead. The picture has a QR code of the link in its corner, and the picture file itself carries the pattern: open it from Projects, or drop it on Import a photo, and the pattern comes back as it was made. A site that re-encodes pictures drops what the file carries; the QR code stays.
• The link carries the whole pattern after the #, so it never reaches a server. Whoever opens it sees the pattern first and gets their own copy to edit. Large patterns with many colors can be too big for a link; the picture still goes, and a file sends the pattern itself.

Devices

dotdot works on phones, tablets, and desktop browsers, with a mouse or with touch. At the workbench, a phone or tablet next to the clay is the intended setup.

Language

dotdot speaks English and Korean. It follows your browser the first time and remembers what you pick after that; the switch is in the header, next to the navigation. Names already saved inside a cane stay as they were written, so switching language does not rename your colors.

Install it and use it offline

dotdot can be installed like an app. It then opens in its own window, without browser chrome, and keeps working with no connection: the screens, the editor, and every cane you have saved are all on the device already.

• Chrome and Edge: the Install button above, or the install icon in the address bar.
• Android: the browser menu has "Install app" or "Add to Home screen".
• iPhone and iPad: Share, then "Add to Home Screen" in Safari.

When a new version is published, the app says so and waits for you to reload. It never swaps versions while you are in the middle of a cane.

What may come later

Later Android app

The same app wrapped for Google Play, once the web version has been used for a while.

Feedback

Found a problem or have an idea? Open an issue on GitHub. More about the project is on the About page.