Random Avatar Generator
A random pixel pattern generator with low collision and zero external dependencies.
Demo
https://morra.co/random-avatar-generator
Introduction
As part of an academic publication and a side project, I built this simple library to ilustrate different aspects of the JavaScript language capabilities and ecosystem, mixed with some general software development concepts.
This library can produce a random svg code for a given complexity with the following logic:
- For a given
complexity
positive integer number a couple of numbers representingx
andy
axes random binary numbers are generated. -
XOR
computed value enables one position within the matrix of values. - In order to have bigger numeric space to prevent collision, each row within the matrix has a random color number.
Installation
$ npm install @fractalsoftware/random-avatar-generator
Usage
How to generate a random pattern:
In browser
<script src="random-avatar-generator.js"></script>
<div id="randomavatar"></div>
<script>
document.getElementById(
"randomavatar"
).innerHtml = randomAvatarGenerator.getRandomAvatar(8);
</script>
In NodeJS
const randomAvatarGenerator = require("random-avatar-generator");
// Using default method parameters
fs.writeFileSync("avatar.svg", randomAvatarGenerator.getRandomAvatar());
In React
import { getRandomAvatar } from "@fractalsoftware/random-avatar-generator";
const avatar = getRandomAvatar();
cons inlineAvatar = <img src={`data:image/svg+xml;base64,${btoa(avatar)}`} />;
Controlled use
You can also generate the avatar data definition and then generate the SVG string with the following methods:
const avatarData = randomAvatarGenerator.generateRandomAvatarData();
const svgCode = randomAvatarGenerator.getAvatarFromData(avatarData);
In this way, you can keep track of the avatar code and repaint it when needed.
Options
These are the general parameters available in the library API:
complexity
This parameter determines the bits length of the x
and y
axes randomly generated numbers.
size
The purpose of this optional parameter is the inner calculations of the SVG paths. As the output is a scalable vector, dimensions are almost irrelevant, but we prefered to keep this parameter available on the the library API.
renderMethod
As each enabled position within the SVG output can be rendered independently, the API allows the selection of the way it will be draw. There are defined two methods for this property: square
(default) and circle
. But also it's possible to extend it defining a custom callback that must output a string with a valid SVG path.
This is an example of a custom callback that can be used in this parameter:
const drawTriangle = (resolution, indexX, indexY) => `M${(indexX * resolution) + (resolution / 2)},${indexY * resolution} l${resolution / 2} ${resolution} l-${resolution} 0z`;
// Output example: M76.5,0 l25.5 51 l-51 0z
in wich
resolution
is function of the relation between size
and complexity
or the size of each cell to be draw:
const resolution = Math.floor(size / complexity);
and
indexX
and indexY
are the selected cell coordinates to be draw.
With this parameters you'll be able to define the absolute position within the draw area and the dimensions of each cell.
More information about SVG paths here: Paths - SVG: Scalable Vector Graphics | MDN.
Available methods
generateRandomAvatarData
Returns a randomly generated string representation code of an avatar for a given complexity
.
Usage
const avatarData = randomAvatarGenerator.generateRandomAvatarData(3);
// Output example: 0-6-6te25-9d9p0-xd5g
Arguments
name | type | description |
---|---|---|
complexity |
number | (optional) Default value: 16
|
avatarDataSeparator |
string | (optional) Default value: -
|
getAvatarFromData
Returns a string with a valid SVG markup for a given avatarData
.
Usage
randomAvatarGenerator.getAvatarFromData("0-6-6te25-9d9p0-xd5g");
// Output: <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="#aeb26d" d="M0,0 h85 v85 h-85Z M85,0 h85 v85 h-85Z M170,0 h85 v85 h-85Z"/><path fill="#f01b54" d="M0,85 h85 v85 h-85Z M85,85 h85 v85 h-85Z M170,85 h85 v85 h-85Z"/><path fill="#17c0d4" d=""/></svg>
Arguments
name | type | description |
---|---|---|
avatarData |
string | (required) A valid avatar data code |
renderMethod |
string or function | (optional) Default value: square
|
size |
number | (optional) Default value: 256
|
avatarDataSeparator |
string | (optional) Default value: -
|
getRandomAvatar
A simpler helper that returns a random SVG markup for a give complexity
Usage
const randomAvatar = randomAvatarGenerator.getRandomAvatar(4);
// Output example: <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="#fbdfae" d="M0,0 h64 v64 h-64Z M128,0 h64 v64 h-64Z"/><path fill="#1ad956" d="M0,64 h64 v64 h-64Z M128,64 h64 v64 h-64Z"/><path fill="#f26f0b" d="M64,128 h64 v64 h-64Z M192,128 h64 v64 h-64Z"/><path fill="#38b27d" d="M0,192 h64 v64 h-64Z M128,192 h64 v64 h-64Z"/></svg>
Arguments
name | type | description |
---|---|---|
complexity |
number | (optional) Default value: 16
|
renderMethod |
string or function | (optional) Default value: square
|
size |
number | (optional) Default value: 256
|
License
The code is available under the MIT license.