The studio needs JavaScript — it renders your dot in 3D on your device. This page still works with it turned on.

Skip to content

Guide

How to make a dot avatar.

Four choices, about ninety seconds, no account. This is the whole workflow — plus the small decisions that make a dot look good at 32 pixels.

Start with the studio

Open the studio or scroll to the maker on the home page. A dot is already on the stage and rendering in 3D. Drag anywhere on the stage to turn her around, scroll or pinch to zoom, and double-click to reset the view.

Nothing is saved to a server, so there is no account to create and nothing to log into. If you want to come back to a character later, either keep the tab open or use Copy link when you are done — the link stores your exact form, colour, finish and look.

Pick a form

Twenty-six bodies, in three families:

Classics

Round, cloud, heart, sprout, star, moon, flower, gem, scallop, butterfly, egg — the dot shapes.

Animals

Bunny, cat, panda, fox, bear, frog, penguin, pig, chick, owl, turtle, fish — built from the same round body, with ears, snouts and markings.

Fantasy friends

Ghost, robot and alien — the ones that look best in glass or chrome.

Two of them are wide and flat (cloud, scallop) and two are tall (egg, sprout), so the studio re-frames the camera as you switch. Every form keeps the same face position, which is why a look you picked on a round dot still lands correctly on a bunny.

Choose a colour

Sixteen ready colours cover the useful range: three yellows, two oranges, three pinks and vibes, two purples, two blues, two greens and a neutral. Pick one and the studio derives a darker shade for ears, patches and ear tips automatically, so a panda stays a panda instead of turning into a pale blob.

Need an exact hex — your brand colour, or a shade from an app icon? Use the custom colour field. Custom colours work with every finish, and the derived accent is recomputed for them too.

Pick a finish

The finish changes the surface of the whole character and nothing else — your form, colour and look stay exactly as they are. Twelve are available:

Short plush

Default. A fine, dense fuzz — the studio mascot look. Reads well at any size.

Long plush

Longer strands with visible depth and a softer silhouette edge. Heaviest effect; best on a big render.

Wool felt

Dry and nubby with no shine at all. Good for a handmade, crafty look.

Velvet

Flat colour with a directional sheen that brightens at the rim. Elegant on dark colours.

Suede

Soft, matte, slightly napped. A quiet finish that keeps detail crisp.

Soft clay

Smooth plasticine with soft highlights. Great for storybook characters.

Matte

Even, paper-like surface. The cleanest option for logos and icon sets.

Glossy plastic

Hard highlights and a wet-looking clearcoat, like a vinyl toy.

Glazed ceramic

Deeper, glassier reflections than glossy — closer to a fired figurine.

Jelly

Translucent and squishy, with light bleeding through the body. Fun with bright colours.

Glass

Fully transparent with refraction, so you can see the face inside. Pairs beautifully with the astronaut helmet.

Chrome

Neutral mirror metal. It reflects the studio environment, so it reads as real chrome rather than gold.

One practical tip: the export is always 1024 × 1024, so fluffy finishes still resolve. For a 32-pixel profile picture, matte, glossy, ceramic or chrome stay legible, while long plush blurs into a soft edge — which can be exactly what you want.

Add a look

Thirty accessories, and they attach to the surface rather than to a fixed coordinate — so a tiara sits correctly on a wide cloud and a wizard hat still lands on a bunny. The groups:

Clips and bows

Heart clip, hair bow, star clip, moon clip, flower crown, sprout clip.

Headwear

Crown, tiara, top hat with monocle, wizard hat, witch hat, party hat, cap, beret, chef hat, sun hat, gardener hat, graduation cap, sleepy cap.

Worn things

Headphones, kitty headphones, sunglasses, round sunglasses, glasses, astronaut helmet, ninja band, sweatband, scarf, ear muffs.

Girl styling adds delicate lashes and a softer mouth; boy styling gives a straight face and a wider smile. Most looks work with either.

Download or share

When the dot looks right, press the download button in the studio. Two formats:

Transparent PNG

1024 × 1024, no background and no floor shadow, auto-cropped to the character with a small margin. Drop it straight into a deck, a profile field or a sticker set.

3D page (HTML)

One self-contained HTML file. Open it and your dot appears full screen, spinning slowly, draggable. The first time it opens it loads the open-source three.js library from a public CDN, so keep a connection handy.

There is also Copy link: the URL encodes your whole configuration, so a friend who opens it gets the identical dot in their own studio, ready to remix.

Tips for a better dot

Troubleshooting

The stage is blank or grey
That means WebGL is unavailable or blocked. Enable hardware acceleration in your browser settings, or try another browser. You can still use every control — the preview will fall back to a flat render.
Dragging does not spin the dot
Click and drag on the stage itself, not on the controls panel. On a phone, use one finger and avoid starting the drag on the panel.
The download button produced nothing
Give the studio a second — the PNG is captured from the live renderer and very large or long-plush dots take a moment. If a download is still blocked, screenshot the stage or try again in a fresh tab.
The 3D page is empty when I open it
That file loads three.js from a CDN on first open, so it needs a connection the first time. Once it has loaded once, your browser caches the library.
A shared link looks different from mine
Links carry form, colour, finish and look. If someone opens it on a phone, long plush is thinned for performance, so the texture will look slightly softer.

Open the studio