Have ideas to improve npm?Join in the discussion! »

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    Random Avatar Generator

    LICENSE Node.js CI Node.js Package

    A random pixel pattern generator with low collision and zero external dependencies.





    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 representing x and y 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.


    $ npm install @fractalsoftware/random-avatar-generator


    How to generate a random pattern:

    In browser

    <script src="random-avatar-generator.js"></script>
    <div id="randomavatar"></div>
      ).innerHtml = randomAvatarGenerator.getRandomAvatar(8);

    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.


    These are the general parameters available in the library API:


    This parameter determines the bits length of the x and y axes randomly generated numbers.


    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.


    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);


    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


    Returns a randomly generated string representation code of an avatar for a given complexity.


    const avatarData = randomAvatarGenerator.generateRandomAvatarData(3);
    // Output example: 0-6-6te25-9d9p0-xd5g


    name type description
    complexity number (optional) Default value: 16
    avatarDataSeparator string (optional) Default value: -


    Returns a string with a valid SVG markup for a given avatarData.


    // 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>


    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: -


    A simpler helper that returns a random SVG markup for a give complexity


    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>


    name type description
    complexity number (optional) Default value: 16
    renderMethod string or function (optional) Default value: square
    size number (optional) Default value: 256


    The code is available under the MIT license.


    npm i @fractalsoftware/random-avatar-generator

    DownloadsWeekly Downloads






    Unpacked Size

    66.3 kB

    Total Files


    Last publish


    • avatar
    • avatar