Fork of Sol Lewis with D3

100%

Fork of Sol Lewis with D3

✓ Published0🌍 Public

Last edited Jan 4, 2024

Created on Jan 4, 2024

This example reproduces a Sol LeWitt-style wall drawing as an interactive web page. It displays a grid of horizontal and vertical stripes that are partially masked by two circular cutouts, creating a layered geometric pattern inspired by the artist’s work. The visualization uses D3.js (version 6.6.1) to select the body and append an SVG canvas, while the mask and rectangle elements are created directly with the Document Object Model (DOM) APIs, with `mask` and `mask2` applied to the stripe layers.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sol LeWitt 2

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes across the full browser window. Two SVG masks create circular cutouts, with inverted black-and-white fills revealing the stripes only within the central circle while inverting the pattern outside it. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to layer 100 rectangles in each orientation, with the circle radius fixed at 200 pixels regardless of viewport size.

Jjisu9393@naver.com

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

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of alternating horizontal and vertical striped lines across the full browser window. Two SVG masks reveal the grid through circular and geometric shapes, while the second mask incorporates D3 symbol shapes and checkerboard patterns within its design. The code uses D3 v7 APIs including `select`, `range`, `symbol`, and `symbols` to generate the SVG elements, with mask composition controling which portions of the line grid remain visible.

AAngie Va. Moreno

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, layering horizontal and vertical striped rectangles on an SVG canvas. The composition uses two masks with inverted circle shapes to create a central circular cutout, revealing the grid-like pattern of 100-pixel stripes. The code employs D3’s `select`, `range`, `append`, and `join` APIs to generate the SVG elements dynamically, with masks defined via `mask` and `circle` elements. The artwork spans the full browser viewport, adapting its size to the window dimensions.

TTobi Olabode

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition, generating a grid of overlaid horizontal and vertical stripes that are masked to reveal a central circle. The visualization uses D3 v6 to create an SVG scene, drawing 100 rectangles in each orientation and applying two masks with contrasting black-and-white circular cutouts to shape the final pattern. The rendering fills the entire browser window, with the circle positioned at the center of the viewport.

DDuckGorilla

89% match

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3 Classes

This example reproduces a Sol LeWitt wall drawing using SVG and D3.js v6.6.1. It displays a grid of horizontal and vertical stripes, masked by two overlapping circles to create a pattern of contrasting line directions. The code uses D3’s `select`, `range`, `.append`, `.attr`, `.data`, and `.join` APIs to construct the SVG elements directly. Two SVG masks (`circle-mask` and `circle-mask-2`) define the circular visibility regions, with the vertical lines visible inside the first circle and the horizontal lines visible inside the second. The drawing fills the entire browser window.

GGbemiga Atolagbe

89% match

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece by layering two alternating sets of mask-applied stripes on an SVG canvas. Horizontally and vertically oriented rectangles are drawn using D3’s `select`, `append`, and `join` APIs, with each set filtered through a circular mask to reveal the intersecting bands within a central circle. The second mask inverts the first, creating a positive/negative interplay of the grid. The code relies on D3 for DOM manipulation and uses window dimensions to scale the piece to the full browser viewport.

Ccdholmes11

89% match

Loading thumbnail…

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

89% match