Skip to main content
SimilarExport ZIP
100%

Fork of Sol Lewitt Reproduction with D3

✓ Published1🌍 Public
Mmaximus2581
Last edited Jul 6, 2022
Created on Jul 4, 2022

This example reproduces a Sol LeWitt-inspired drawing using overlaid horizontal and vertical stripes, each masked by a circle at the center. The composition reveals a square grid of lines intersecting within a circular boundary against a contrasting background. The visualization uses the D3.js library (v6.6.1) through a React interface, rendering SVG elements via the `select`, `range`, and `append` APIs. It constructs masks with `attr` to define the circular cutouts, and generates the 100 stripes per direction using D3's `join` for efficient data-driven element creation.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js within a React framework, rendered as an SVG. It displays a grid of horizontal and vertical rectangular stripes that are partially revealed through two circular masks, creating a crosshatched pattern with a central circular void. The code leverages D3's `select`, `range`, and `.join()` API to generate the stripes, while SVG mask elements define the visibility zones. The visualization dynamically sizes to the browser window, demonstrating a blend of generative art and data-driven DOM manipulation.

MMark Christian
95% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3 v7, generating a grid of horizontal and vertical stripes overlaid with a circular mask. The SVG rendering shows a black-and-white composition where two perpendicular striped layers intersect, with a central circle revealing horizontal bands while the outer area displays both orientations. The code uses `d3.select`, `d3.range`, and `join` to create rectangles, and applies SVG `<mask>` elements with circles to control which stripes appear in each region, with the circle radius derived from a fixed pixel step.

VVincent Leduc
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 v6, displaying a grid of overlapping horizontal and vertical stripes that form a circular pattern through SVG masks. The code uses `d3.select`, `d3.range`, and `join` operations to render 100 rect elements in each direction, with the stripes visible only through two circular mask regions. The first mask reveals alternating bands inside a white circle, while the second creates an inverse effect, producing a geometric interplay of lines. The rendering approach combines D3's data-join with native SVG mask and circle elements to achieve the Op-art style composition.

CCurran Kelleher
93% match
Loading thumbnail…

Fork of Sol LeWitt with d3

This example reinterprets Sol LeWitt’s geometric wall drawings as a generative SVG composition. The view shows a grid of horizontal and vertical stripes, each rendered as a series of `rect` elements, clipped by two circular masks that create a central lens effect. Using d3’s `select`, `range`, and `.join()`, the code creates 48 stripes in each direction across the full window width and height. One mask reveals the horizontal pattern within the circle, while an inverted mask shows the vertical pattern outside it, blending the two orientations.

Mmax-31
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt–style grid using two sets of horizontal and vertical rectangles, each clipped by a circular mask to produce a black-and-white geometric composition. The code uses D3’s `select`, `range`, and `join` to generate 100 stripes in each direction, while `d3.symbol` and `symbols[1]` draw a diamond-shaped mask path. Two SVG masks alternate inverted fills, revealing or hiding parts of the grid. The visualization runs in React, renders as SVG, and adapts to the full browser window size.

MMark Christian
93% match
Loading thumbnail…

Fork of Sol Lewitt Reproduction with D3

This example generates an abstract grid pattern using Sol Lewitt-inspired geometry. It draws horizontal and vertical strips of rectangles, then applies two distinct masks with D3’s `symbol` shapes (including circles, crosses, and diamonds) to selectively reveal or hide portions of the grid. The masks are created with `d3.mask`, one inverted against the other, producing a layered interplay between the symbol silhouettes and the underlying striped composition. The visualization uses D3 v7 selections, `range`, and `join` to construct the SVG elements within a full-window viewport.

Aaidarshafeev1@gmail.com
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style grid of horizontal and vertical bars, with the pattern masked to reveal a central circle. It uses D3’s `select` and `range` to generate 100 rectangular strips in each direction, while two SVG `<mask>` elements—one inverted—combine to create the circular cutout effect. The code runs in a React environment and renders vector graphics as SVG.

Ccharlieronchetti@gmail.com
93% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, rendering 100 horizontal and 100 vertical striped rectangles in an SVG canvas. The artwork uses two circular mask patterns—one with a black background and white circle, another with inverted colors—to create intersecting circular cutouts where the lines cross. The code uses D3's `select`, `range`, and `join` APIs to efficiently generate and position the rect elements, with the masks applied via SVG `mask` attributes to achieve the geometric composition.

Jjctmercado
93% match