Github Avatar-like Animated Matrix Grid with JavaScript and Canvas – minBlock.js

minBlock.js is a stand-alone JavaScript library that enables you to draw Github avatar alike animated matrix grid with random colors using Html5 canvas.

Basic usage:

Load the minBlock.js JS library into your project.

<script src="minBlock.js">

Create an Html5 canvas element for the matrix grid.

<canvas id="myCanvas" ></canvas>

Initialize the matrix grid and set the primary & secondary color for the blocks.

init({
  // canvas ID
  divId: 'myCanvas',
  // time for transition
  time: 300,
  // set to false to use fixed color
  randomColor: true,
  colorPrimary: '#27ae60',
  colorSecondary: '#2ecc71',
  // set to true to pause the matrix grip
  pause: false
});

Changelog:

02/16/2019

• bugfix: config.color has to be checked, not options.color