Fork of React Starter

100%

Fork of React Starter

✓ Published1🌍 Public

Last edited Jul 14, 2024

Created on Jul 13, 2024

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.

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

92% 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

92% 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

90% 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

89% 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

88% match

Loading thumbnail…

Fork of HTML Starter

This example uses raw JavaScript and the SVG API to dynamically construct a full-window visualization. It creates two distinct masks on an SVG canvas: a white circle on a transparent background and a white rectangle with a black circular hole at the center. The code then generates 100 horizontal and 100 vertical thin rectangles, applying these masks to reveal a grid-like pattern of intersecting lines against a plain background. The result is a geometric composition built entirely through procedural DOM manipulation without any external libraries.

SSGPPellow

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 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

87% match