MaskLab guide: how to texture shapes and text

What is MaskLab?

MaskLab is a free browser tool, made for ZuCity, that fills each part of a shape or each letter of a word with its own image. Start from a yin-yang, split circle, triskelion or quadrant grid, upload your own SVG, or type text. It works on phones as well as desktops.

How do I put a different texture in each half of a yin-yang?

Open MaskLab, which starts on a yin-yang, and drop one image on the dark half and another on the light half. Each half and each dot is its own region, with its own zoom, spin, position, flip, opacity and blend mode.

1. Open MaskLab. The yin-yang is the default shape.
2. Drag an image onto the dark half, or open its card under Regions and choose an image.
3. Do the same for the light half, and for the top and bottom dots if you like.
4. Drag a half to move its image. Scroll to zoom and shift-scroll to spin; on a phone, pinch and twist.
5. Choose Export PNG or Export SVG.

How do I fill text or letters with an image?

Choose Text, type your words, and MaskLab turns each letter into its own region that you can fill with a different image. Set Split to Line or Whole to fill a whole line or the whole text with one image instead.

1. Choose Text under the shapes (on a phone, in the Shape tab).
2. Type in the Words box and pick a font.
3. Press Add photos to deal your images into the letters, then Remix for a new deal.
4. Or drop an image onto a single letter to fill just that one.
5. Export a PNG or an SVG.

Can I use vertical Japanese text?

Yes: choose Text, set Direction to Vertical, and pick the built-in Zen Kaku Gothic New Black font, which covers Japanese kana and kanji. Characters stack downward and columns run right to left. If the chosen font cannot draw your characters, MaskLab tells you instead of drawing empty boxes.

How do I use my own shape?

Choose Custom SVG and pick an SVG file; each separate path, circle, rectangle or polygon in it becomes its own fillable region. Any SVG with separate paths will do, such as a logo, a flag or an icon.

1. Choose Custom SVG under the shapes.
2. Pick an .svg file from your device.
3. Fill each region with an image, as you would a yin-yang half.

What can I export, and is the SVG editable?

You can export a PNG up to 4096 pixels square, an editable SVG, or a JSON save file, or copy the PNG to your clipboard. The SVG keeps one clip path per region with its image inside, so each region stays separate in a vector editor. Import JSON reopens a save file where you left off.

Is MaskLab free, and are my photos uploaded?

MaskLab is free and runs entirely in your browser, so your photos are never uploaded. There is no account to make and no server that sees your images.

Who made MaskLab?

MaskLab was made for ZuCity, a coliving neighborhood an hour from Tokyo in the Japanese Alps. ZuCity posts on X, Instagram and Substack.