Fork of Fork of React Starter

Fork of Fork of React Starter

A generative grid pattern emerges from the intersection of horizontal and vertical black rectangles, masked by two concentric circular windows that reveal only a circular portion of the underlying structure. Built with React and D3 v7, the code constructs an SVG canvas sized to the browser window, using SVG mask elements to define the circular viewports and layering two sets of rect elements in a loop to create the striped composition.

Fork of Fork of Fork of Fork of React Starter

A web page displays a grid of horizontal and vertical black bars overlaid with two circular SVG masks, creating a crosshatch pattern that is visible only within two intersecting circular regions. Using React 18 and D3's `select` and `range`, the code appends an SVG canvas sized to the viewport and generates 100 rectangles in each orientation. The masks, defined via `svg.append('mask')`, combine white and black circles to control visibility, producing a stark geometric composition centered on the screen.

Fork of React Starter

This example shows a full-window SVG grid of thin horizontal and vertical rectangles that combine to form a subtle crosshatch pattern. A white circular mask placed at the center of the canvas reveals a clean circular window through the grid, interrupting the lines. Built with React and D3 v7, the code constructs the SVG and its elements using native DOM methods like `createElementNS` and `setAttribute`, rather than JSX or D3 data joins. The grid density and circle radius scale directly with the browser window dimensions.

Fork of React Starter

A grid of thin black horizontal and vertical strips forms a woven texture across the full viewport. Two circular masks reveal the underlying pattern: the first mask, created with a white rectangle and black circle, isolates a circular region where vertical strips appear; the second mask, using a white circle on a transparent background, exposes horizontal strips within its boundary. The example uses D3 selections with `join` and `range` to generate 100 rectangles per orientation, and React’s UMD build to mount the document, rendering entirely as SVG.

Fork of Fork of Fork of React Starter

This visualization shows a grid of horizontal and vertical bars rendered as SVG rectangles, with a circular region left visibly unobscured at the center of the viewport. The code uses D3’s `select` and `range` functions to generate 100 bars in each orientation across the full window dimensions. Two SVG masks, created via D3’s `append` and `attr` methods, control visibility: one mask contains a white circle over a black background, while the other inverts this pattern. The bars display fine black stripes outside the circular mask area, producing a clean intersecting line pattern.

90% match

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

89% match

Fork of Fork of HTML Starter

A geometric pattern of horizontal and vertical lines intersects within a circular window, creating a crosshatched grid centered on the screen. The visualization uses two SVG masks to reveal alternating line orientations: one mask shows horizontal stripes through a white circle, while the other displays vertical stripes around it. Built with React and D3, the code generates 100 rect elements in each direction, then applies mask circles of 200-pixel radius to control visibility.

Ccoderhh

89% match