Fork of React Starter

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

A grid of overlapping squares spirals outward from the center of the canvas, each square's size, stroke thickness, and color modulated by a simple algebraic sequence. The visualization uses React to define a custom SVG component, generating 190 squares with dynamically computed properties. D3.js selects the SVG canvas and appends a group for layout, while the React component maps an array of calculated values to render each square with a drop-shadow filter and randomized RGB stroke colors. The result is an abstract composition of layered geometric forms.

85% match

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.

84% match

Fork of React Starter

This React-based visualization renders a grey SVG canvas containing a dense scatter of circles positioned via nested array maps and randomized multiplication, with fill colors derived from squared index values. A fixed red path element, drawn from a long SVG path string, overlays the circles as a smooth curve. The example demonstrates React's declarative SVG rendering, using ReactDOM to mount the component and a nested map structure to generate hundreds of circle elements at runtime, creating a chaotic yet colorful pattern against the structured line. The code also includes console logging of array operations, but the primary visual output is the combination of randomly placed circles and the static red path.

83% match

Fork of React Starter

The example renders a grid of fifteen cartoon faces, each composed of a yellow background circle, two eyes, and an arc-shaped mouth. The faces are generated using React components, with random eye radius values calculated via `Math.random`. D3’s `arc` generator creates the mouth paths, while `range` from D3 produces the array for the five-by-three grid. SVG elements are drawn through a React container that translates each face to a common center.

PPiotr Paszek

My React Starter

This example renders a circular grid of empty rectangles using React and SVG. It generates 50 points along a sine and cosine curve, mapping the x-coordinate to `Math.cos` and the y-coordinate to `Math.sin`, each multiplied by a pixel scale of 800. The nested `.map()` calls draw a 50×50 matrix of square cells positioned at each coordinate pair, creating a wave-like pattern across the canvas. The code directly uses ReactDOM to mount the component into the root element.

Fork of React Starter

This React and SVG example renders a grid of horizontal and vertical lines that form a circular composition. The code uses SVG mask elements to define two complementary circular regions, then maps over arrays to generate 100 thin rectangles in each orientation. The first mask uses a black background with a white circle to reveal vertical stripes, while the second mask uses inverted colors to reveal horizontal stripes. The result is a generative pattern that follows Sol LeWitt's conceptual drawing style.

Ccm

Fork of React Starter

A grid of 24 randomly generated cartoon faces fills the screen, each rendered as an SVG component with yellow rounded-rectangle heads, eyes, and curved arcs for mouths. The faces vary in eye position, eye radius, mouth radius, and mouth width through randomized properties. Built with React and D3 v7, the visualization uses D3's `arc` generator for mouths and `range` to create the array of face instances, with reusable React components composing the outer face container, bone shape, eyes, and mouth.

NNoelle Huchette

React Starter

This example uses D3.js (v5) and SVG to render three concentric rings of colored squares, each labeled with a number. The code constructs a custom `Square` class and uses `d3.select`, `selectAll`, and data joins to append rectangles and text elements within an SVG viewBox. Square positions are calculated using trigonometry with varying radii for each ring, though the sample data and color definitions are only partially implemented in the provided files.

WWalden Li