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

100%

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

✓ Published2🌍 Public

Last edited Jul 4, 2022

Created on Jul 4, 2022

Forked from Fork of Fork of Fork of Fork of Random world shapes with react -4

A generative geometric composition displays a set of nested rectangles arranged diagonally across a 960-by-500 SVG canvas. The rectangles scale and position according to a computed mathematical sequence, while each stroke width is randomized. Built with React and ReactDOM, the code maps an array of 50 values to SVG `<rect>` elements, applying a drop shadow filter via `<feDropShadow>`. The rendering uses JSX to declare the SVG structure, with no interactive or animated behavior present.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Random world shapes with react -4

A random geometric composition of hundreds of overlapping rectangles, each with a unique size, position, and stroke width, rendered as an SVG within a React application. The rectangles are generated procedurally using a loop that multiplies an index by ten, then applies random scaling to coordinates and dimensions. React maps over this array to render each `<rect>` element, applying a drop-shadow filter defined in SVG `<defs>`. The visualization uses ReactDOM to mount the component, producing an abstract, layered pattern.

NNita

93% match

Loading thumbnail…

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

A grid of 500 small colored rectangles drifts in a wave-like pattern across a dark SVG canvas, each rectangle’s position derived from sine and cosine of a generated numeric sequence. The visualization is built with React, rendering SVG elements via ReactDOM, and uses a custom `My_circle` component that draws rectangles with randomized stroke widths and RGB colors, while a drop-shadow filter adds depth. The data array is procedurally generated in a loop, not from an external dataset.

NNita

91% match

Loading thumbnail…

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

A grid of hundreds of small, randomly colored rectangles is arranged along a sinusoidal curve, each with varying stroke widths and subtle drop shadows. The visualization uses React to render SVG elements, with D3 v7 selecting the body and computing coordinate values. The code generates 490 rectangles from a mathematical formula, applying random RGB colors and stroke properties derived from sine and cosine functions, creating an organic, chaotic pattern across the canvas.

NNita

91% match

Loading thumbnail…

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

This visualization presents an abstract, generative composition of 191 rectangular and circular shapes derived from a mathematical sequence. Each shape’s position, size, stroke width, and RGB color are computed from the sequence value and random functions, creating a scattered, non-repeating pattern across an SVG canvas. The code uses React for the component structure, with d3.select and d3.append to construct the SVG container, while the drawing itself relies on SVG primitives. A drop-shadow filter is applied to the shapes via an SVG defs element. The data originates from a formula within the script, not an external dataset, and rendering occurs through ReactDOM.render.

NNita

91% match

Loading thumbnail…

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

An array of small, colored rectangles is scattered across the screen, each positioned using a formulaic calculation based on its index. The visualization is rendered in SVG via React, with D3 v7 used to select the body and append the initial SVG element. The rectangles are generated from a simple loop that computes x and y coordinates from trigonometric and linear expressions, with stroke widths and RGB colors derived from the same calculation. The design appears algorithmic and abstract, without a clear geographic or data-driven mapping.

NNita

89% match

Loading thumbnail…

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

A grid of randomly positioned circles and rectangles fills an SVG canvas, each shape rendered with semi-transparent strokes and varied colors derived from mathematical calculations. The visualization uses React components to generate 190 shape elements, with each circle’s radius fixed while rectangles receive computed dimensions. The code combines React 16.13.1, D3 v7 for SVG manipulation, and direct DOM rendering through ReactDOM, with random stroke widths, colors, and opacity levels creating an abstract, generative composition.

NNita

89% match

Loading thumbnail…

Fork of Random world shapes with react -2

This example generates 490 random geometric shapes using React and SVG. Each iteration renders a circle and a rectangle with random positions, dimensions, and stroke widths within a 960 by 500 viewport. The visualization demonstrates how React components like `My_circle` can produce dynamic, non-repeating patterns through JavaScript's `Math.random()` function, with all shapes drawn using SVG elements and styled with distinct teal and purple strokes.

NNita

89% match