Random Squares

100%

Random Squares

✓ Published1🌍 Public

Last edited Jan 3, 2024

Created on Jan 3, 2024

Forked from tesT 1

Random Squares demonstrates SVG shape generation by populating a 1000×1000 canvas with 500 randomly positioned, sized, and colored rectangles. Each `<rect>` element receives a random RGB fill, a random x/y coordinate within the viewport, and a random width and height up to 50 pixels. The code uses vanilla JavaScript with `Math.random()` to compute values and `document.querySelector('svg').innerHTML` to append shapes directly to the SVG DOM. The result is a dense, chaotic mosaic of overlapping squares with no underlying data or interaction, showcasing basic SVG rendering through a simple procedural loop.

AI-generated description

Demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Random Squares and circles

This gallery item demonstrates the visual result of overlaying randomly generated SVG shapes. Using an HTML5 `<svg>` canvas, the code executes three separate JavaScript loops to populate the space with 500 `<rect>` elements, 200 `<circle>` elements, and 100 `<polygon>` elements representing triangles. Each shape receives a random RGB color from a palette generated with `Math.random()`, as well as random positioning within the 1000-by-1000 pixel viewport and a random size up to 50 pixels. The visualization showcases how combining basic geometric primitives with randomized attributes can create a colorful, abstract composition.

NNita

85% match

Loading thumbnail…

Random lines

This example shows a 1000 by 1000 pixel SVG canvas filled with five hundred random lines. The lines have randomly generated start and end coordinates, and each line is assigned a random hexadecimal color. The code creates the lines dynamically using the DOM API, specifically `document.createElementNS` with the SVG namespace, and appends them to the SVG element via `getElementsByTagName`. The rendering is pure SVG, with no external libraries or data sources.

NNita

82% match

Loading thumbnail…

Random world shapes with react - 1

This example displays 490 randomly positioned circles and squares scattered across a 960-by-500 SVG canvas, with each shape’s stroke width also randomized. Using React 16 and ReactDOM, the App component generates an array of scaling values and maps them to a custom My_circle component, which renders both a circle and a rectangle per iteration with coordinates calculated via Math.random(). The visualization demonstrates lightweight SVG rendering with React’s component-based approach, producing a chaotic, non-interactive abstract composition.

NNita

80% match

Loading thumbnail…

Random square shapes with react July 4,2022 - 1

A generative art piece displays an array of random square shapes, rendered as SVG through React. The code defines a `My_circle` component that draws rectangles with varied stroke widths and colors derived from a mathematical sequence, positioned using sine and cosine functions. Using D3 v7 for DOM selection and React for component rendering, it creates 190 rectangles with randomized RGB values and a drop shadow filter, producing a chaotic, colorful composition against a black background.

NNita

79% match

Loading thumbnail…

Random Path

A grid of circles and connecting path segments appears in random positions across an SVG canvas, with each shape colored by a formula based on its index. The visualization uses React to render nested map functions that generate ten iterations of elements, producing overlapping geometric forms. The code relies on ReactDOM to mount the component, while SVG primitives like circle and path handle the drawing. Randomness drives the placement and stroke colors, creating a chaotic, layered composition against a light gray background.

NNita

79% match

Loading thumbnail…

Random Path

This example renders a dense composition of randomly positioned circles and connecting line segments on a gray SVG canvas. The visualization repeatedly maps an array of numbers from 0 to 10 through nested map operations, generating overlapping shapes at coordinates computed with `Math.random()`. Each circle uses a computed `rgb()` fill color derived from its index, while paths are stroked with varying gray shades. The React component renders the SVG directly, with no external data source, producing an abstract, generative pattern.

NNita

78% match

Loading thumbnail…

Compact Squares with random Opacity

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.

NNita

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

78% match