Disabling randomisation for gradients

[rbozan]

Hi, thanks for the package first of all.

My question is about enforcing colours on a gradient instead of randomising them.

For example let's say I want to set the body colours to the colours of the French flag 🇫🇷. I would supply to the bodyColors property the hexidecimals of blue, white and red . The bodyColorFill is set to linear.

Now because of the randomisation the avatar is not necessarily in the order of blue, white and red but their colours could be reordered. But how can I enforce the colours to follow exactly the order I supplied, e.g. disable the randomisation of colours?

[FlorianKoerner]

Hi @rbozan, thanks for asking. You were right that there was no way to do it, the shuffle always ran. It seemed like such an obvious gap once you pointed at it that it went straight into 10.5.0, which I just published.

The new option is *ColorOrder. Set it to fixed and your colors stay exactly as you passed them. Your flag example, on bottts (its color group is called base, so the option is baseColor):

const avatar = new Avatar(style, {
  seed: 'Felix',
  baseColor: ['0055a4', 'ffffff', 'ef4135'],
  baseColorFill: 'linear',
  baseColorAngle: 0,
  baseColorOrder: 'fixed',
});

https://api.dicebear.com/10.x/bottts/svg?seed=Felix&baseColor=0055a4,ffffff,ef4135&baseColorFill=linear&baseColorAngle=0&baseColorOrder=fixed

fixed

random, the default

Every color group in a style gets the option, so bodyColorOrder and backgroundColorOrder work the same way. With fixed, a gradient uses your colors as stops from first to last and a solid fill always takes the first one. The number of stops defaults to how many colors you passed, so you can leave *ColorFillStops alone. random is still the default, so nothing you have rendered so far changes.

It is in all six libraries (JavaScript, PHP, Python, Rust, Go, and Dart) and in the HTTP API. The rules are written up in the core options guide.

Thanks again for the nudge, this one was fun to build.

[rbozan]

Thanks for the quick fix and the package, it's super, especially like the animated avatars!

[rbozan]

@FlorianKoerner I guess it's not published to npm yet? Not sure if it's a mistake :)

[FlorianKoerner]

@rbozan Good catch, thanks. 10.5.0 was actually on npm the whole time, but the release workflow had tagged it v10-lts instead of latest, so a regular install still resolved to 10.4.0. The tag is fixed now and npm update should pull 10.5.0 without any tricks.