@blumepage/dicebear-flowers

A DiceBear avatar style that draws cheerful flowers. Petals, centers, stems, leaves and backdrops are all parameterised so you can lock pieces and let the rest randomise from the seed.

Install

npm install @dicebear/core @blumepage/dicebear-flowers

Usage

import { createAvatar } from '@dicebear/core';
import { style } from '@blumepage/dicebear-flowers';

const svg = createAvatar(style, { seed: 'rosie' }).toString();

Any unset option falls back to the schema default (the full set of values), so omitting an option means "random per seed".

createAvatar(style, {
  seed: 'rosie',
  petalShape: ['heart'],     // lock to heart-shaped petals
  petalCount: [5, 6],        // pick from these counts
  withStem: [false],         // no stem
});

Domain seeds

Each of these optional seeds drives a fixed subset of parameters using its own deterministic sub-prng, independent of the avatar seed. Useful for "the same flower across users" or "the same backdrop across a set".

| Seed | Locks | | --- | --- | | flowerSeed | petal shape/count/variegation, base colour + modifiers, center style + colour (petal rotation stays per-avatar) | | stemSeed | stem style, leaf count/shape/size/pattern/angle, leaf positions | | colorSeed | leaf colour, stem colour | | backdropSeed | backdrop scheme, tone, lightness, split + split params |

createAvatar(style, {
  seed: 'alice',
  flowerSeed: 'rose-A',     // same flower head as 'rose-A' regardless of avatar seed
  backdropSeed: 'beige-1',  // same backdrop as 'beige-1'
});

Options

All array options behave the same way: a one-element array fixes the value, multiple elements are sampled by the prng.

Petals

| Option | Type | Default | Notes | | --- | --- | --- | --- | | petalShape | ('round' \| 'pointed' \| 'tulip' \| 'heart' \| 'daisy')[] | all | daisy doubles the petal count automatically. | | petalCount | number[] (5, 6, 7, 8, 10, 12) | all | | | petalBaseColor | hex strings | brand palette | Blume petal colours (forgetmenot blue, bluebell, tulip red, sunflower yellow, lantana coral, daylily orange, white). | | petalPrimaryModifier | number[] | [-15, 15] | Brightness shift applied to base. Normal-distributed between min and max. | | petalSecondaryModifier | number[] | [-30, -10] | Second tone used in tonal variegation. | | petalVariegation | ('solid' \| 'tonal')[] | both | tonal alternates two shades per petal. | | petalRotation | number[] (0–90) | [0] | Rotates the whole flower head. Uniformly distributed. |

Center

| Option | Type | Default | | --- | --- | --- | | centerStyle | ('dot' \| 'ring' \| 'dotted')[] | all | | centerColor | hex strings | curated brand-aligned set |

Stem & leaves

| Option | Type | Default | | --- | --- | --- | | withStem | boolean[] | [true] | | stemStyle | ('straight' \| 'bent' \| 'wavy')[] | all | | stemColor | hex strings | green range | | leafCount | number[] (0, 1, 2) | [1, 2, 2] | | leafShape | ('thin' \| 'almond' \| 'round' \| 'strap' \| 'twin')[] | all | | leafSize | number[] (60–120 %) | [80, 110] | | leafPattern | ('plain' \| 'vein')[] | mostly plain | | leafAngle | number[] (−45..45) | [-30, 30] | | leafColor | hex strings | green range |

Flower style

| Option | Type | Default | | --- | --- | --- | | flowerStyle | ('flat' \| 'outlined')[] | ['outlined'] |

Backdrop

| Option | Type | Default | | --- | --- | --- | | withBackdrop | boolean[] | [true] | | backdropScheme | scheme | all of palette, match, complement, analogous, triadic, tetradic, opposite-analogous, split-complement | | backdropTone | ('subtle' \| 'saturated')[] | both | | backdropLightness | ('light' \| 'dark')[] | weighted toward light | | backdropSplit | ('off' \| 'on')[] | both | | backdropSplitModifier | number[] (−10..40) | [-15, 25] | | backdropSplitAngle | number[] (0..180°) | [0, 180] | | backdropSplitCount | number[] (1..6) | [1, 2, 3] (geometric: 50% 1, 25% 2, 12.5% 3, …) | | backdropSplitPattern | ('bands' \| 'pizza')[] | both |

Backdrop schemes

• palette — warm Blume beige, brightness shifts with petal luminance.
• match — a light tint of the petal colour.
• complement — hand-tuned complement per petal (cool petals get warm complements and vice versa, with cleaner targets than mathematical h+180).
• analogous — petal hue rotated by 45°.
• triadic — petal hue + 120°.
• tetradic — petal hue + 90°.
• opposite-analogous — petal hue − 45°.
• split-complement — petal hue + 150°.

Backdrop tone & lightness

backdropTone controls saturation/lightness intensity (subtle = pastel, saturated = punchier). backdropLightness: 'dark' runs the resolved backdrop through a hue-preserving darken: every scheme has a dark variant.

Split backdrop

When backdropSplit: ['on'] the backdrop becomes a hard-edged two-tone fill. The second colour is shiftHex(base, backdropSplitModifier). Use backdropSplitPattern to choose between linear bands and radial pizza-slice wedges; backdropSplitCount controls how many sections (1 → 2 sections, 2 → 4, 3 → 6, …).

Preview app

npm install
npm run preview:install
npm run preview

The preview is a Vite app for tweaking option arrays interactively. Sidebar state and domain seeds persist via localStorage.

License

MIT