Create

Guide

Avatars

A seed can be any text, such as a name or an email address. The same text always draws the same picture, so a doodle can be an avatar: one per person, with no image to store.

Mirrored pixels

GitHub's default avatar: 5 × 5 cells, the same on both sides. @once draws the random bits once, and each cell reads the bit at abs(@dx), which a column shares with its mirror. 

@grid: 5 / 60vmin / #f0f0f0 ^.82;
@seed: grace;
--bits: @once.ri(65535);
background: hsl(@once.r(360) 55% 55%);
opacity: $(floor(bits / 2 ^ (5 * abs(@dx) + @y)) % 2);
Open in playground

Quilt

@once.doodle draws one random quarter, and scale flips it into the other three. 

@grid: 2 / 60vmin;
@seed: grace;
scale: $(sign(@dx)) $(sign(@dy));
background: @once.doodle(
  @grid: 2 / 100% / @palette(1);
  background: @p.palette(4);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  scale: @p(1, -1) @p(1, -1);
);
Open in playground

On a page

<css-doodle seed="grace">
  @grid: 5 / 48px / #f0f0f0 ^.82;
  --bits: @once.ri(65535);
  background: hsl(@once.r(360) 55% 55%);
  opacity: $(floor(bits / 2 ^ (5 * abs(@dx) + @y)) % 2);
</css-doodle>

Or render the avatar to an SVG file ahead of time with image(), at the size it is shown: 

import { writeFile } from 'node:fs/promises';
import { image } from 'css-doodle/generator';

const { svg } = await image(`
  @grid: 5 / 48px / #f0f0f0 ^.82;
  --bits: @once.ri(65535);
  background: hsl(@once.r(360) 55% 55%);
  opacity: $(floor(bits / 2 ^ (5 * abs(@dx) + @y)) % 2);
`, { seed: 'grace', width: 48, height: 48 });

await writeFile('grace.svg', svg);

See also