Skip to content
Pridatar

Docs

One function, one component, fifteen flags.

Where it lives

# this fork lives in the repo, not on npm (yet)
src/lib/pridatar/   # generator
src/components/pridatar/Pridatar.tsx

Anywhere

import { pridatar, pridatarDataUri } from "@/lib/pridatar";

const svg = pridatar(user.email, { size: 48 });
const src = pridatarDataUri(user.email, { flag: "trans" });

React

import { Pridatar } from "@/components/pridatar/Pridatar";

<Pridatar name={user.email} size={48} />
<Pridatar name={user.email} flag="nonbinary" stripes="both" size={48} />

Flags

PreviewflagStripes
Rainbow example"rainbow"
Progress example"progress"
Transgender example"trans"
Bisexual example"bisexual"
Pansexual example"pansexual"
Nonbinary example"nonbinary"
Lesbian example"lesbian"
Asexual example"asexual"
Genderqueer example"genderqueer"
Genderfluid example"genderfluid"
Agender example"agender"
Aromantic example"aromantic"
Intersex example"intersex"
Demisexual example"demisexual"
Polysexual example"polysexual"

Motion

// idle breathing + bob + blink, off by default
<Pridatar name={user.email} motion="idle" size={64} />
<Pridatar name={user.email} motion="bouncy" size={64} />

// same option on the string renderer
pridatar(user.email, { motion: "idle" });

The keyframes ship inside the SVG, so a copied or downloaded SVG animates on its own. Everything is wrapped in a reduced-motion query, so anyone who asked for less motion gets the still figure.

Idle motion exampleBouncy motion example

License and attribution

Pridatar is a fork of Alain00/blobatar (MIT, Copyright © 2026 Alain). The seed hashing, silhouette vocabulary, layout and OKLCh color math are upstream and unmodified; the pride palettes and the striping renderer are this fork's. Upstream license text ships at src/lib/pridatar/vendor/LICENSE, with the full change list in src/lib/pridatar/NOTICE.md.