Fork of Fork of React Starter

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.

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

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

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.

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

88% match