Skip to main content
SimilarExport ZIP
100%

Compact Squares with random Opacity

✓ Published1🌍 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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Compact Squares with random Opacity

A grid of compact squares forms a large square, each cell filled with a radial gradient that creates a Saturn-like color blend. The visualization is generated entirely in React, rendering SVG rectangles in a nested loop with no spacing between them, and applies a drop-shadow filter for subtle depth. The opacity is noted in the code but remains commented out, so all squares render at full opacity. The layout is computed from fixed dimensions, with a 960-pixel side and 30-pixel cells, producing a 32-by-32 matrix.

NNita
92% match
Loading thumbnail…

Fork of Random square shapes with react July 4,2022 - 1

A grid of overlapping squares spirals outward from the center of the canvas, each square's size, stroke thickness, and color modulated by a simple algebraic sequence. The visualization uses React to define a custom SVG component, generating 190 squares with dynamically computed properties. D3.js selects the SVG canvas and appends a group for layout, while the React component maps an array of calculated values to render each square with a drop-shadow filter and randomized RGB stroke colors. The result is an abstract composition of layered geometric forms.

NNita
83% match
Loading thumbnail…

Circles Effect at the junctions

A grid of grey squares with random opacity creates a subtle, shifting visual effect at the intersections where square borders meet. Using React and SVG, the code renders a 10-by-10 array of rectangles with `stroke-width` outlines, forming a larger outlined square boundary. Each rectangle’s `opacity` is set to a random value via `Math.random()` during the React component’s render, producing a stippled, textured look. The example relies on React’s `ReactDOM` to mount the SVG into the DOM, with dimensions fixed at 960 by 500 pixels.

NNita
82% match
Loading thumbnail…

Fork of Fork of Fork of Random square shapes with react July 4,2022 - 2

A grid of randomly sized and colored squares, each with a thin contrasting outline, fills the viewport in an overlapping, chaotic arrangement. The squares are generated from a derived formula that calculates their positions and dimensions, while their stroke widths and RGB color values are randomized. Built with React and D3 v7, the visualization uses SVG `rect` elements and applies a drop-shadow filter for depth. The data is synthetic, computed directly in the React component rather than loaded from an external source.

NNita
82% match
Loading thumbnail…

Compact circles

A grid of small translucent circles is scattered inside a large bounding circle, creating a roughly uniform field of overlapping dots. The visualization uses React to render SVG elements, with nested `Array.map` calls generating the circles. Each circle’s position is determined by multiplying array values with `Math.random()`, producing a semi-random distribution within the 960×500 viewport. The code defines constants for the outer radius (400) and inner radius (40), and uses ReactDOM to mount the component, with no external data or interaction.

NNita
82% match
Loading thumbnail…

Compact circles

A set of small, semi-transparent circles scatters randomly within a larger bounding circle, producing a compact, clustered composition. The visualization is built with React and rendered as SVG, using a fixed coordinate system centered on the page. The code generates a grid of positional values, then maps them to random x and y offsets inside the outer circle using `Math.random()`, with each circle assigned a constant radius and opacity. ReactDOM renders the SVG tree directly into the DOM, with no external data or interaction.

NNita
81% match
Loading thumbnail…

Fork of Fork of Random world shapes with react July 4,2022 - 1

A grid of nested, randomly colored and sized squares overlays the viewport, generated from a mathematical sequence of 50 values. The React app renders these shapes as SVG `<rect>` elements with dynamic stroke colors, widths, and dimensions, using `Math.random()` for each attribute. A drop-shadow filter adds subtle depth. The code relies on React 16 and ReactDOM to mount the component, with all geometry computed directly in JavaScript without external data sources.

NNita
81% match
Loading thumbnail…

Fork of Fork of Random circle shapes with react July 4,2022 -2

This example renders a grid of 200 randomly positioned and colored squares, each with a thin, semi-transparent stroke, onto an SVG canvas within a React application. The code uses ReactDOM to inject a component into the page, while D3.js is loaded solely for its selection and SVG creation utilities, though the actual drawing is handled by React's JSX elements. Each square’s size, color, and position are derived from a simple arithmetic series and the `Math.random` function, producing a non-repeating, abstract pattern of shapes.

NNita
81% match