Gobble matrix

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.

70% match

Cell Matrix

A grid of purple and yellow rounded rectangles forms a randomly generated 16-by-8 cell matrix, with each cell’s color determined by a Math.random() call within the React component. The visualization is rendered as SVG rectangles using React and JSX, with cell dimensions computed from the container’s inner width and height divided by the grid counts. The layout is managed by a VizContainer component that applies margins and translates the SVG group, while the page loads React and D3 v6 from a CDN in the HTML entry point.

Ddartigues

69% match

SVG Fundamentals

This example showcases a static SVG composition of dice arranged in a grid on a blue tray, with custom shading to simulate depth. The code directly uses the SVG `path` and `rect` elements within an inline `<svg>` tag, styled via CSS classes that define fills, strokes, and stroke widths. Distinct shapes for left, middle, bottom, and corner dice are created through carefully defined path commands, while additional path elements represent side and bottom shading. The visualization demonstrates fundamental SVG drawing techniques and CSS styling without relying on any JavaScript libraries.

Jjustinhersom@gmail.com

Aadventuresenglish.info@gmail.com

Fork of Fork of Fork of Sol LeWitt-Inspired Shapes

This visualization generates a grid of Sol LeWitt-inspired abstract compositions using randomized geometric shapes and colors. Each block combines horizontal slats, vertical stripes, and filled rectangles that are partially hidden by SVG masks shaped like D3 symbols (circles, crosses, diamonds, and other glyphs). The rendering approach uses D3 selections with `join` to bind data to SVG `rect` elements, while masks alternate between inverted and non-inverted states across rows. The page fills the viewport and redraws randomly on each load, producing a dynamic, colorful mosaic that echoes the artist’s rule-based aesthetic.

d3d3d3 2

Two layered grids of thin rectangles sweep across the full screen, one horizontal and one vertical, creating a moiré-like interference pattern. Each grid is partially hidden by an SVG mask that reveals the shape of a large symbol—a star from the d3 symbol set—at the center. The code builds the visualization with D3 selections, joining data arrays to create 100 rects per grid, and defines reusable mask-rendering functions via `svg.call`. Rendering uses SVG elements within a React framework, with masks composed of a full-screen rect and a symbol path.

GGusnaRWX

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.

Compact Squares with random Opacity

A grid of compact squares forms a large square, each cell filled with a radial gradient that creates a Saturn-like color blend. The visualization is generated entirely in React, rendering SVG rectangles in a nested loop with no spacing between them, and applies a drop-shadow filter for subtle depth. The opacity is noted in the code but remains commented out, so all squares render at full opacity. The layout is computed from fixed dimensions, with a 960-pixel side and 30-pixel cells, producing a 32-by-32 matrix.

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

A grid of randomly sized and colored squares, each with a thin contrasting outline, fills the viewport in an overlapping, chaotic arrangement. The squares are generated from a derived formula that calculates their positions and dimensions, while their stroke widths and RGB color values are randomized. Built with React and D3 v7, the visualization uses SVG `rect` elements and applies a drop-shadow filter for depth. The data is synthetic, computed directly in the React component rather than loaded from an external source.