Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Compact Squares with random Opacity

Public visualization

Viewing a saved revision (read-only)

414ff147c92a4ab28ad5cf7d1d812c96

Compact Squares with random Opacity

1 star1🌍 Public
NNita
Last edited Mar 6, 2020
Created on Mar 6, 2020

This visualization displays a 48×48 grid of compact squares, each filled with a semi-transparent grey tone that varies unpredictably. The squares are arranged in a dense block, with a single black outline enclosing the entire grid. Using React and ReactDOM, the code generates the grid by mapping over arrays of coordinates, assigning each rectangle a random opacity value and a reddish fill color computed from the square’s position. The SVG rendering uses the `<rect>` element with attributes for width, height, and stroke, while the `Math.random()` function controls both the opacity and the red channel variation.

AI-generated description

React Starter code.