Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
NNita
Last edited Jul 4, 2022
Created on Jul 4, 2022

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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
96% 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
93% 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
93% 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
92% 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
92% match
Loading thumbnail…

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

This example uses React and SVG to render 490 overlapping circles and rectangles, each with randomized positions, radii, and stroke widths. The shapes are generated programmatically from an array of values, with each circle paired with a rectangle of the same size and stroke, creating a dense, abstract composition. The visualization demonstrates how React components can dynamically map data to SVG elements, with the `My_circle` component receiving randomized coordinates and dimensions. The rendering relies on ReactDOM to mount the SVG into the DOM, producing a chaotic, layered pattern of colored outlines.

NNita
92% 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
91% match
Loading thumbnail…

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

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.

NNita
91% match