DotMatrx.js

DotMatrix.js is a small, performant class-based library. DotMatrix utilizes SVG(s) instead of canvas for performance and development reasons. SVG(s), CSS3 transitions and JavaScript were used to create the beautiful animations.

Playground

Configurable Demo Note: LetterDot is not available in the current demo

Configurations

new DotMatrix(rootSVG, args);

rootSVG

property	type	default	optional
rootSvg	node	undefined	no

args

property	type	default	optional
height	number	undefined	yes
width	number	undefined	yes
columns	number	40	yes
rows	number	40	yes
animationDelay	number/boolean	500	yes
distanceToFear	nunber	50	yes
distanceToStep	number	10	yes
dotColorPattern	string	random - options: random, diagonal, vertical, horizontal, fill	yes
dotFillColor	string	black - options: hex color, color literal	yes
dotRadius	number	5	yes
dotType	string	smart - options: smart, letter	yes
padding	number	30	yes
patternColors	array	['red','orange','yellow','green','cyan','skyblue','blue','indigo','violet','grey']	yes
spacing	number	30	yes
svgBackgroundColor	string	black - options: hex color, color literal	yes
cssClassGoingHome	string	animate_going_home	yes
timing	object	{fromHome: 'ease',backHome: 'ease'}	yes
duration	object	{fromHome: '0.1s',backHome: '1s'}	yes

Example

// Entry point SVG
const svg = document.querySelector('.some-svg');

// Full args
new DotMatrix(
    svg,
    {
        padding: 50,
        spacing: 80,
        width: 50,
        height: 50,
        distanceToFear: 100,
        distanceToStep: 10,
        animationDelay: 200,
        dotRadius: 10,
        dotType: 'smart',
        dotFillColor: 'green',
        letterFillColor: 'white',
        dotColorPattern: 'diagonal',
        patternColors: [
            'red',
            'orange',
            'yellow',
            'green',
            'cyan',
            'skyblue',
            'blue',
            'indigo',
            'violet',
            'lightgray',
        ],
        cssClassGoingHome: 'animate_going_home',
        timing: {
            fromHome: 'ease',
            backHome: 'ease',
        },
        duration: {
            fromHome: '0.1s',
            backHome: '1s',
        },
    }
);

// Height and Width => columns and rows dynamically calculated
new DotMatrix(
    svg,
    {
        height: 500,
        width: 500,
    }
);

// Columns and Rows => height and width dynamically calculated
new DotMatrix(
    svg,
    {
        columns: 30,
        rows: 10,
    }
);

// Height and Width take precendent
new DotMatrix(
    svg,
    {
        height: 500,
        width: 500,
        columns: 30,
        rows: 10,
    }
);

LetterDot specific properties | property | type | default | optional | | ----------------- |:-----------------:| -----: | ----------:| | letterFillColor | string | white | yes | | wordsList | array | undefined | no |

Note: At this time dot classes are not intended to be instantiated outside of the DotMatrix class.

new BaseDot(rootSVG, args); | property | type | default | optional | | ----------------- |:-----------------:| -----: | ----------:| | dotFillColor | string | black | yes | | dotRadius | number | 5 | yes | | animationDelay | number/boolean | 500 | yes | | distanceToFear | nunber | 50 | yes | | uniqueIdentifier | number/iterator | undefined | no | | isDesktop | boolean | undefined | no |

Extends BaseDot

new SmartDot(rootSVG, args); | property | type | default | optional | | ----------------- |:-----------------:| -----: | ----------:| | distanceToStep | nunber | 50 | yes | | cssClassGoingHome | string | animate_going_home | yes|

new LetterDot(rootSVG, args); | property | type | default | optional | | ----------------- |:-----------------:| -----: | ----------:| | dotLetter | string | undefined | no | | letterFillColor | string | white | yes|

Sizing

Without passing explicit arguments, the DotMatrx will default to 40 columns and 40 rows. When columns and rows are passed the height and width of the matrix is dynamically calculated. When height and width dimension are passed, columns and rows will be dynamically calculated.