Skip to main content
SimilarExport ZIP
100%

Fork of Episode 4: Sol LeWitt Reproduction with D3

✓ Published0🌍 Public
SShitij Mathur
Last edited Feb 12, 2025
Created on Feb 12, 2025

This example reproduces a Sol LeWitt geometric artwork as a generative drawing in SVG. It divides the canvas into four quadrants, each rendered with a distinct pattern of thin rectangular bands, using masks to crop horizontal, vertical, and rotated line groups. The code relies on D3’s `select` and `range` functions to create 100 repeating rectangles per section, with each pattern defined by explicit SVG `mask` elements. Rectangles are positioned and rotated via attributes like `transform`, with dimensions fixed to the viewport.

AI-generated description

Trying to reproduce a Sol LeWitt art piece using D3. Inspired by the original piece here.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using an SVG canvas. Four equal quadrants display distinct generative line patterns: horizontal bands in the top left, vertical lines in the top right, diagonal hatching in the bottom left, and a rotated diagonal grid in the bottom right, each confined by rectangular masks. The work uses D3 v6 to generate repeated rectangles via `selectAll("rect").join("rect")`, applying spatial transformations like `rotate(45)` and `translate(-100, 0)` to create geometric variations. The full browser window serves as the drawing surface, with each pattern built from 100 iterated shapes.

DDea Bardhoshi
93% match
Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style geometric drawing using SVG masks to reveal distinct line patterns in four quadrants. The code uses D3 selections and `range(n)` to generate 100 horizontal, vertical, and diagonally rotated rectangles, each clipped by a rectangular mask. The `select` and `append` methods build the SVG canvas and mask elements, while `join` binds data to create the rects. The result demonstrates how D3 v3 and SVG masking can compose layered linear compositions.

CCurran Kelleher
93% match
Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt geometric artwork using D3.js v6 to generate a square divided into four quadrants, each filled with distinct linear patterns. The visualization uses SVG rendering with `d3.select` and `d3.range` to create hundreds of thin rectangular shapes, while SVG `<mask>` elements define the boundaries of each quadrant. Horizontal, vertical, and rotated line patterns are clipped within the masks, recreating LeWitt’s systematic, rule-based aesthetic. The code defines all layout parameters manually, including square positions and rotation transforms, producing a static, procedural homage to the original piece.

Xxani
93% match
Loading thumbnail…

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces one quadrant of a Sol LeWitt wall drawing, showing a single square of repeating horizontal stripes clipped to mask boundaries. The visualization uses D3 v6 to generate 100 SVG rectangles positioned vertically across the full viewport, each masked by a white 150×150 pixel square in the canvas’s top-left corner. The code defines the mask with SVG `<mask>` elements and appends rectangle data via `selectAll`, `data`, and `join`, using `range` from D3 to supply indices. Only the top-left square is enabled; the other three quadrants remain commented out.

Rrwata97
91% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing as an interactive SVG visualization. Two sets of thin horizontal and vertical rectangles are drawn on a full-window canvas, with circular masks (drawn via D3 masks) applied to reveal a central circular region where the lines intersect. It uses D3 v3's `select`, `append`, and data joins with `range` to generate 100 strips in each direction. The rendering is pure SVG, with masks defining the visible geometry.

AAprilF
89% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3’s `select` and `range` APIs to generate layered SVG rectangles. Two groups of 100 horizontal and vertical striped rects are rendered across the full viewport, each masked with circular clip regions. The first mask reveals a white circle on a black background, while the second inverts the effect, creating a central pattern of intersecting bands. The code constructs SVG masks and rects dynamically, with dimensions tied to the window size.

AAkinola Samson
89% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using an SVG canvas and D3.js. It shows a grid of horizontal and vertical rectangles that intersect within two circular masked regions at the center of the viewport. The visualization uses D3's `select` and `range` APIs to generate 100 rectangles in each direction, applying SVG masks (`circle-mask` and `circle-mask-2`) to reveal specific patterned areas. The code demonstrates a programmatic, data-driven approach to recreating geometric abstract art.

CCora
89% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawing using overlapping horizontal and vertical stripes that intersect within two circular masks. It renders 100 thin rectangles per direction across the full viewport, with the first mask revealing the horizontal set as a white circle on black, and the second mask revealing the vertical set as a black circle on white. Built with D3 v6, the code uses `select`, `range`, and `join` to generate SVG `<rect>` elements, while mask definitions control visibility. The result shows two concentric circular zones of striped patterns against a plain background.

Mmarc.chatton@outlook.com
88% match