Fork of Random Squares and circles

Random Squares

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.

85% match

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.

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.

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.

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

A collection of 190 nested square outlines and small circles rendered in SVG, colored with random RGB values and positioned along a logarithmic curve derived from the input number. The React app maps an array of calculated values to custom `My_circle` components, each drawing a square with a dynamic stroke width and a static drop-shadow filter. Using React 16 and D3 v7 solely for SVG selection and attribute setup, the visualization applies `Math.random()` for stroke thickness and color channel values, with the viewport set to 960×500 pixels.

Fork of Fork of Fork of Cool Art : generated line data with d3 line generator api : circle on path-1

This example displays a generative abstract composition of overlapping, semi-transparent circles scattered across a black SVG canvas. The circles have random radii, positions, and stroke colors ranging in green and blue hues, creating a dense, layered visual texture. The code generates an array of 990 coordinate pairs using a loop that applies random scaling factors, then binds this data to circle elements. It relies on D3 v7’s selection and data join methods, with attributes set directly via `.attr()` calls, including fill, stroke-width, and stroke color derived from random RGB values.

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.

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

This example displays a field of randomized, semi-transparent square outlines and circles arranged in a curved band across a dark background. The shapes are generated procedurally from a mathematical formula that computes 190 values, which determine each shape’s position, size, and RGB stroke color through trigonometric functions and random multiplication. Built with React and D3 v7, the visualization renders SVG elements, using a `<defs>` filter for drop shadows and mapping the computed array to custom React components. All geometry is computed client-side without external data.