Interactive Dot Matrix In JavaScript And SVG – DotMatrx.js

Category: Animation , Javascript | February 13, 2020
Views Total:868 views
Official Page:Go to website
Last Update:February 13, 2020


Interactive Dot Matrix In JavaScript And SVG – DotMatrx.js


DotMatrx.js is a JavaScript library to create an animated, responsive, interactive, SVG based dot/letter matrix where dots/letters react to mouse and touch events.

How to use it:

1. Load the necessary JavaScript files in the document.

<script src="src/CoordinateTranslator.js"></script>
<script src="src/BaseDot.js"></script>
<script src="src/SmartDot.js"></script>
<script src="src/LetterDot.js"></script>
<script src="src/DotMatrix.js"></script>

2. Create an empty SVG element for the dot matrix.

<svg class="dot-matrix"></svg>

3. Render a basic dot matrix on the page.

const svg = document.querySelector('.dot-matrix');

new DotMatrix(svg, {
    ... configs here ...

4. Possible settings to config the dot matrix.

new DotMatrix(svg, {

    // the height/width of dots
    height: undefined,
    width: undefined,

    // the number of columns/rows to generate
    columns: 40,
    rows: 40,

    // animation configs
    timing: {fromHome: 'ease',backHome: 'ease'},
    duration: {fromHome: '0.1s',backHome: '1s'},

    // the distance to fear & step
    distanceToFear: 50,
    distanceToStep: 10,

    // random, diagonal, vertical, horizontal, fill
    dotColorPattern: 'random',

    // hex color or color literal
    dotFillColor: 'black',

    // dot radius in pixels
    dotRadius: 5,

    // smart, letter
    dotType: 'smart',

    // padding in pixels
    padding: 30,

    // color array
    patternColors: ['red','orange','yellow','green','cyan','skyblue','blue','indigo','violet','grey'],

    // the space between dots
    spacing: 30,

    // background color
    svgBackgroundColor: 'black',

    // CSS class
    cssClassGoingHome: animate_going_home

5. Specific options for letter matrix.

new LetterDot(rootSVG, {

    // letter string
    dotLetter: undefined,

    // fill color
    letterFillColor: 'white' 

You Might Be Interested In:

Leave a Reply