Lego, HTML5 and Mathematics can be combined to create lego objects, in this case the physical lego bricks are replaced by virtual pixel-art lego bricks.
Creating such a type of animation involves a number of steps.

info

The model

Firstly, a three-dimensional model, a virtual representation of an object, has to be translated into so-called voxels; volumetric pixels or three-dimensional pixels
A voxel most often has the shape of a cube.
To create the HTML5 lego animation voxels the size of the so-called Fundamental Lego Unit (FLU) are used, which, in terms of dimensions, differ slightly from a cube.

The next step is to combine the Fundamental Lego Units to 2x2, 2x4, 2x6, and 2x8 lego bricks, if possible.

The name of the lego bricks is based on the number of dots in horizontal and vertical direction.

The translation from a three-dimensional model into voxels and eventually into lego bricks occurs offline in advance, since this only needs to be done once and the file size of the 3D model can be quite large.
The model data needed for the HTML5 lego animation is much smaller.

Model Data

The model data is used to build the lego object during the HTML5 lego animation.
In this case the data representing the lego object is stored as an image.

By using an image, the data is compressed, so it's transferred slighty faster and easily on the internet compared to a more common text file.

Once the image is loaded, the model data is translated into numbers and stored on your local computer.

HTML5 Lego Animation

To generate an image or animation by code you have two options in HTML5; you can use either the canvas or SVG.
The canvas is used for pixel graphics, SVG is used for vector graphics.
The HTML5 lego animation is based on pixels, so the canvas is used.

To render each lego brick on the canvas, each lego brick could be drawn by hand. For each color and each lego brick type an image needs to be drawn.
To reduce the amount of pixel pushing by hand, only one small image is used, which is the Fundamental Lego Unit for the HTML5 lego animation.

Each type of lego brick consists of a combination of these small images.

The initial color of the image is used to indentify the color of the lego brick element. For example, gray means bright color in front, blue is the color for the darker left side, green is transparent etc. The exact color drawn on the canvas depends on these initial colors in combination with the colors used by the lego company for real lego bricks.

To make the lego object look less clinical/perfect, more vivid, each lego brick has a slightly different color.