Code Portrait: your photo in . - > <

Code Portrait turns a photo into an animated portrait made of just four characters: . - > <. Then you can add up to three orange details, like glasses, a hat or a dot on your t-shirt.

Try it: code-portrait.sevcovicp.workers.dev · GitHub

Why so simple

The style is inspired by Dieter Rams' "Less, but better." Just four characters and a single orange accent, nothing more. It's made for fun, so anyone can try it, no design skills needed.

How it works

1. Add a photo. Drop it, paste it or pick a file. A portrait with your face and shoulders works best.

2. Describe the orange details. Write things like "add glasses", "orange dot on my t-shirt" or "watch". The tool tells you what it understood under each field.

3. Export. Download a PNG or an SVG, or copy the portrait as plain text.

You can also change the level of detail, switch between a dark and a light background, and turn background removal on or off.

What you can add

Glasses, sunglasses, a hat, a watch, a dot on the chest, earrings, a mustache and a bow tie. You can also turn your hair, eyes, lips, face or shirt orange.

Your photo stays with you

Everything runs in your browser. Google's MediaPipe finds your face, eyes, shoulders and wrists and removes the background, all on your device. The photo is never uploaded anywhere.

How the characters are picked

Bright areas get the densest characters (< and >), mid-tones get -, shadows get ., and the background stays empty. The direction of < or > follows the light, which helps faces read as faces.

Give it a try, and if you like it, you can buy me a coffee.