Data generative art

100%

Data generative art

✓ Published1🌍 Public

Last edited Aug 8, 2023

Created on Aug 6, 2023

This is an SVG-based data generative art piece built with React that visualizes a mathematical pattern by mapping coordinate values to image placements. It creates a circular arrangement of small icon images, where each image’s position is calculated using sine and cosine functions multiplied by pixel offsets. The React code uses the `createRoot` API to render an SVG composition with 50×50 mapped iterations, pulling an external SVG image (hosted on GitHub) as its repeating visual element. The artwork demonstrates generative design through iterative trigonometric calculations and nested array mappings.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data generative art - Unlimited Buddha

A circular arrangement of small Buddha images radiates from the center of a 960-by-960 SVG canvas, with each image positioned at polar coordinates calculated from 50 radial positions and 50 angular steps. The React application uses `useState` and `Array.map` to generate the grid, placing each 20-pixel-wide SVG via an `<image>` element whose `href` points to an external Buddha icon. A decorative path element, embedded with a long SVG `d` attribute, sits at the top-left, scaled and translated. The composition creates a dense, repeating mandala-like pattern through simple trigonometric placement.

NNita

80% match

Loading thumbnail…

Concentric circles

A generative artwork renders hundreds of distorted heart-like shapes as concentric, overlapping circles. Built with React and SVG, the code maps an array of 300 indices to paths, each positioned randomly and scaled, with fill colors derived from the index values. The `Path` component defines a complex outline, and the background uses a linear gradient. The result is a dense, colorful composition that emerges from the interplay of simple transformations and random values.

NNita

79% match

Loading thumbnail…

Data generative art - Unlimited Buddha

A generative SVG artwork depicts an intricate, Buddha-like silhouette built from overlaid, scaled copies of a single path. The code uses React and the `createRoot` API to render a 960x960 pixel canvas with a cream background. Nested `Array.map` loops iterate through 100 values to position and scale a complex path string, creating a patterned meditative form through repetition rather than drawing the image directly.

NNita

78% match

Loading thumbnail…

Fork of Data generative art - Unlimited Buddha

A generative art piece draws an intricate, branching mandala-like pattern with a looping SVG path repeated across a grid of 150 by 150 positions, scaled and rotated to fill the canvas. Built with React and rendered as SVG, the code uses `ArrayX` and `pixel` arrays to map each grid cell, applying trigonometric functions to position mirrored copies of the path around the center. The result is a dense, symmetrical composition resembling an ornate floral or geometric bloom.

NNita

78% match

Loading thumbnail…

Fork of Fork of Data generative art - Unlimited Buddha

This generative art piece renders a dense, mandala-like pattern of overlapping Buddha silhouettes. It uses React and SVG, with the shape defined by a complex path data string. The code maps over 1050×1050 coordinate pairs, calculating positions using the sine and cosine of an array value multiplied by the pixel index, creating a circular, radial distribution. The SVG is rendered on a warm, off-white background.

NNita

77% 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

77% match

Loading thumbnail…

React Starter

This example demonstrates a dense cluster of overlapping circles and line paths rendered within an SVG container, using React to generate the SVG elements. The visualization creates a chaotic, generative pattern by mapping over a fixed array of numbers, where each circle’s position and color are computed with `Math.random`, while path elements connect random coordinates. Built with React 16.10 and ReactDOM, the code renders directly to the DOM via `ReactDOM.render`, styling the SVG with a grey background. The approach highlights how React can dynamically produce SVG visualizations without external data sources.

NNita

76% match

Loading thumbnail…

Task-7

A highly generative, chaotic abstract composition rendered in SVG using React. The visualization maps a 21-element numeric array through a triple-nested loop, producing thousands of small diamond-like polygons whose positions, sizes, and colors are all randomized on every render. Each shape is rotated 45 degrees, creating a dense, layered field of overlapping geometric forms against a black background. The color palette is extremely vibrant, with RGB values up to 500, producing neon and oversaturated hues that shift unpredictably. The work is a playful exploration of randomness, repetition, and computational aesthetics, emphasizing emergent complexity from simple iterative rules.

Aasimcyb@gmail.com

76% match