Interactive Dot Matrix In JavaScript And SVG – DotMatrx.js

Preview:

Description:

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
    animationDelay:500,
    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' 
    
});