Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Compact Squares with random Opacity

Public visualization

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.

Comments

Sign in to join the discussion.

MIT Licensed