Fork of Fork of Sol LeWitt Reproduction with D3

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using a grid of thin horizontal and vertical lines, clipped by two circular masks to create a layered, geometric composition. The SVG rendering is built with D3’s `select`, `append`, and `range` APIs, which generate the rect elements and apply the mask attributes. Two distinct masks, one with a black background and a white circle, the other inverted, control which parts of the line grid remain visible, yielding the final intersecting pattern.

Eelisabet@pitch.io

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v6, rendering a grid of horizontal and vertical stripes masked by two concentric circles. The visualization shows a geometric pattern of alternating line thicknesses, with the circular masks creating a layered negative-space effect. The code uses `d3.select`, `d3.range`, and `join` to generate SVG rectangles, while SVG `<mask>` elements with `circle` and `rect` shapes define the visible regions. All rendering occurs client-side in SVG, with dimensions set to the full window size.

AAdityan Nainar

Fork of Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3's selection and data-join methods. It renders 100 horizontal and 100 vertical rectangles across the full viewport, with each set masked by a circular cutout at the center—one mask inverts the other, creating a striking interlocking grid pattern. The visualization uses D3 v6's `select`, `range`, and `append` APIs to construct the SVG elements and masks, with the circle radius fixed at 200 pixels. The code demonstrates how layered SVG masks can produce complex visual effects from simple rectangular primitives.

MMohammed

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

Fork of Sol LeWitt Reproduction + D3

A fork of a Sol LeWitt reproduction uses D3 to generate layered horizontal and vertical striped rectangles across the full viewport. Two SVG masks create geometric cutouts: a white diamond-shaped hole in one mask and a black circular hole in another, revealing intersecting grid patterns. The code employs d3.select, d3.range, d3.symbols, and d3.symbol to draw paths and shapes, with masking applied via SVG mask elements. The example renders entirely in SVG, driven by window dimensions.

Iionakeeley

Fork of Sol LeWitt Reproduction with D3

This piece reproduces a Sol LeWitt wall drawing using D3.js to create a grid of horizontal and vertical lines. A circular mask reveals the intersection of the two line sets, with a white circle in the first mask and an inverted circle in the second, producing a clear central focus. The SVG rendering is generated procedurally using `d3.select`, `d3.range`, and the `join` API to append 100 rectangles in each direction, sized relative to the window dimensions. The artwork dynamically adapts to the viewport, with the mask radius fixed at 200 pixels.

SShashi Kumar

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to generate a grid-like pattern of horizontal and vertical lines. The lines are rendered as SVG rectangles, with two circular masks applied to create a central circular viewing window. The horizontal bars are masked by a black rect with a white circle, while the vertical bars use an inverse mask, producing a crosshatched effect within the circle. The code uses d3-selection’s `select`, `append`, and `join` methods alongside `range` to efficiently create the marks.

Iibrarmunircoder

Fork of Sol LeWitt Reproduction with D3

A grid of 100 horizontal and 100 vertical striped rectangles is clipped by two inverted circular masks, revealing a crosshatched pattern within a central circle against a solid background. Built with D3 v6, the example uses `select`, `range`, and `join` to generate `<rect>` elements in SVG. Two masks—one with a black background and white circle, the other inverted—apply opposite clipping to the line groups, creating the visual effect.

NNatalia BM