Fork of React Starter

100%

Fork of React Starter

✓ Published0🌍 Public

Last edited Jul 18, 2023

Created on Jul 16, 2023

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of React Starter

This example uses React and D3 to create a full-window SVG grid of horizontal and vertical stripes. A pair of circular SVG masks selectively reveals the underlying patterns: one circle is punched out of a white rectangle to show the vertical stripes, while a second white circle exposes the horizontal stripes. The code builds the masks and rectangles imperatively via D3's `select` and `join`, with `range` generating the stripe positions. The result is a simple, mask-driven optical illusion where the two stripe directions appear only within their respective circular regions.

EEnoch Ssentumbwe

89% match

Loading thumbnail…

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.

EEnoch Ssentumbwe

89% match

Loading thumbnail…

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.

EEnoch Ssentumbwe

88% match

Loading thumbnail…

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.

EEnoch Ssentumbwe

88% match

Loading thumbnail…

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

87% match

Loading thumbnail…

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.

EEnoch Ssentumbwe

86% match

Loading thumbnail…

Fork of HTML Starter

This example creates an SVG mask that reveals horizontal stripes through a circular window. The code generates 100 horizontal rectangles, each masked by a circle centered on the screen, while 100 vertical rectangles overlay the full canvas without masking. All shapes are built dynamically using the SVG namespace with `document.createElementNS`, and the mask is defined with a black background rect and white circle to control visibility. The result is a simple geometric pattern combining masked and unmasked grid-like elements.

EErik L

85% match

Loading thumbnail…

Fork of HTML Starter

This example uses SVG masks to create an intersecting grid of horizontal and vertical lines, revealing a circular window at the center. The code employs `d3.select` and `d3.range` to generate two sets of 100 rectangles, one for each orientation, and applies a mask with a white circle over a black background to the horizontal lines, and a mask with a black circle over a white background to the vertical lines. The result is a cross-hatched pattern that becomes visible only inside the central circle.

AAnna Xu

85% match