D3 Sol Le Witt Vertical

100%

D3 Sol Le Witt Vertical

✓ Published1🌍 Public

Last edited Apr 28, 2024

Created on Apr 28, 2024

This example generates a grid of horizontal and vertical rectangles that form a striped pattern. Two circular masks reveal the grid only within their boundaries, creating a bold, minimalist composition reminiscent of Sol LeWitt's wall drawings. The code uses D3's `select` and `range` APIs to generate 100 rectangles in each direction, with SVG `mask` elements controlling visibility. Each stripe is a distinct SVG `rect` element, and the masks are composed of black and white rects and circles.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

D3-Sol-LeWitt

This example pays homage to Sol LeWitt by using D3.js to generate a grid of horizontal and vertical rectangles, which are only visible within the intersection of two circular masks. The visualization renders 100 stripes in each direction, with the SVG `mask` elements defining a central circle that reveals the grid against a contrasting background. The code uses D3’s `select` and `range` to create the rectangles and applies the masks for a layered, geometric effect.

AAbdulafeez-okewunmi

92% match

Loading thumbnail…

Sol LeWitt with d3

This example uses React and d3 to render a grid of horizontal and vertical rectangles, creating a pattern inspired by Sol LeWitt. The code uses `d3.select` and `d3.range` to generate 48 rectangles per axis, each masked by a circular shape. Two SVG masks—one with a white circle on black, the other with a black circle on white—are applied to the respective sets, producing a cross-hatching effect inside the circle and a contrasting negative space outside. The rendering targets a full-window SVG.

Mmax-31

91% match

Loading thumbnail…

Sol LeWitt with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js in a React application, rendered as SVG. It shows a grid of horizontal and vertical rectangles that are partially revealed through two circular masks, creating an intersecting crosshatch pattern. The code uses `d3.select` and `d3.range` to generate 100 stripes in each direction, with alternating fills applied via SVG `mask` elements. Two separate masks—one inverting the circle’s effect—control visibility, producing a dynamic interplay between the grid lines and the central circular reveal. The visualization runs full-window, adapting to the viewport dimensions.

Ddalia.miliauskaite@me.com

90% match

Loading thumbnail…

Sol Lewwit D3

This example recreates Sol LeWitt’s wall drawing aesthetic using D3.js and SVG. Two sets of 100 horizontal and vertical stripes are rendered across the full viewport, each configured with a mask that reveals a circular region in the center. The circle masks create an interplay between the two orientations, highlighting where horizontal lines show through one mask and vertical lines through the other. The code uses `select`, `range`, and data joins from D3 v7, with SVG masks and rectangles composing the visual.

PPeiyang Li

90% match

Loading thumbnail…

Sol LeWitt with D3-v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 in a React-free HTML page, rendering with SVG. It shows overlapping horizontal and vertical striped rectangles that create a crosshatch pattern, with circular masks revealing a central circular region where the lines intersect. The visualization uses `d3.select`, `d3.range`, and data joins to generate 100 horizontal and 100 vertical `<rect>` elements, each masked by a dedicated `<mask>` with a circle. The first mask exposes a white circle over black background, while the second inverts the effect, producing contrasting visible and hidden areas. The code demonstrates D3’s data-binding and SVG mask primitives without external data sources, relying entirely on procedural generation.

Ddalia.miliauskaite@me.com

90% match

Loading thumbnail…

D3 Sol LeWitt 2

This visualization generates an abstract grid of horizontal and vertical stripes across the full browser window, inspired by Sol LeWitt’s geometric wall drawings. Two sets of one hundred rectangles each create the striped pattern, with each set filtered through a separate SVG mask. The masks incorporate D3’s `symbol` shapes—including circles, diamonds, and squares—positioned via `d3.range` and `selectAll().join()`. Using D3 v7 with a React setup, the code renders entirely as SVG, with masking inverted between the two layers to produce intersecting geometric cutouts.

JJMeltzer92

90% match

Loading thumbnail…

Sol Lewitt vertical

This example uses D3.js to render an SVG visualization inspired by Sol LeWitt’s geometric wall drawings. It creates a grid of alternating horizontal and vertical rectangles, where each set is restricted to a circular region using SVG masks with white and black fills. The first mask reveals a circle of horizontal bars, while the second exposes vertical bars around it, producing an interlocking checkerboard-like pattern. The code leverages d3.select, d3.range, and SVG mask and rect elements to generate the pattern.

AAnshul Rawat

89% match

Loading thumbnail…

Full SolLeWitt Reproduction D3

This example reproduces a Sol LeWitt-inspired drawing by rendering a grid of vertical and horizontal stripes that intersect through two complementary circular mask regions. The visualization uses raw SVG DOM manipulation in vanilla JavaScript, creating 100 vertical rectangles masked by a circle cutout and 100 horizontal rectangles masked by an inverted circle. The masks, defined via SVG `mask` elements with white and black fills, reveal alternating stripe patterns. The result is a geometric interplay of lines and negative space, rendered dynamically to fill the browser window.

Rrespingu

89% match