Background Moving Blocks
Source on GitHub

Download

Creates a grid of cells with a collection of blocks randomly moving around from one cell to another. 

<background-moving-blocks></background-moving-blocks>

Attributes

square If used then all the cells will be perfect squares. The last row of cells may not fit correctly and overflow.

Slots

Default Each of the default slot elements will be cloned a number of times into blocks that are then moved around the grid of cells. Plain text cannot be used, they must be elements.

CSS Variables

--fill-ratio The ratio between the cells that are empty and those that contain a block. Percentage value between 1 and 90.
--cell-row-count The number of cell rows. This is only used if the attribute square is not set.
--cell-column-count The number of cell columns.
--move-speed The time it takes for a block to move from one cell to another (default is 1 second).
--move-transition The type of transition the block will move in (default is linear).
--move-interval The number of milliseconds between each block move (if possible).

Notes

The slots you give can be styled however you like, but it must all be done with inline styling. Using classes will not work, as the class styling will not get through the web component's shadow DOM.

Examples

Color squares

Here we are using the square attribute which makes all the blocks perfectly square, no matter the size of the parent. This will mean that the last row will not be show fully and will be cropped. Doing this means we do not use the --cell-row-count CSS variable as it is not needed.

Inside there are 5 DIV tags, each will a different background color. These default slot elements will be cloned multiple times to create the set of blocks that are then moved around. The default slot elements are not used or shown directly, but hidden from view. 

<background-moving-blocks
  square
  style="
    width: 100%;
    height: 10rem;
    --cell-column-count: 30;
    --fill-ratio: 50;
    --move-speed: 0.25s;
    --move-transition: ease-in-out;
    --move-interval: 250;">
  <div style="background-color: #f3732d;"></div>
  <div style="background-color: #f8961f;"></div>
  <div style="background-color: #f9c750;"></div>
  <div style="background-color: #287ea1;"></div>
  <div style="background-color: #44aa8b;"></div>
</background-moving-blocks>

Multiple shapes with a gradient background color

In this example we are moving SVG icons, one of which is set with a different fill color, white, to make it standout a little. We have also set the background color to a linear gradient. 

<background-moving-blocks
  square
  style="
    width: 100%;
    height: 15rem;
    background-image: linear-gradient(
      to top left,
      hsl(187, 100%, 71%),
      hsl(54, 100%, 50%));
    --cell-column-count: 30;
    --fill-ratio: 60;
    --move-speed: 0.5s;
    --move-transition: ease-in-out;
    --move-interval: 100;">
  <icon-column-line-chart style="fill: white;"></icon-column-line-chart>
  <icon-database-tick style="fill: #287ea1;"></icon-database-tick>
  <icon-ungroup style="fill: #287ea1;"></icon-ungroup>
  <icon-file1 style="fill: #287ea1;"></icon-file1>
  <icon-thumbs-up style="fill: #287ea1;"></icon-thumbs-up>
  <icon-exclamation-mark-diamond style="fill: #287ea1;"></icon-exclamation-mark-diamond>
</background-moving-blocks>