Author: | mmason33 |
---|---|
Views Total: | 1,154 views |
Official Page: | Go to website |
Last Update: | February 13, 2020 |
License: | MIT |
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' });