Skip to main content
SimilarExport ZIP
100%

Sol LeWitt Reproduction Vertical with D3

✓ Published0🌍 Public
WWasanta Pruttisarikorn
Last edited Nov 26, 2022
Created on Nov 26, 2022

This example reproduces a Sol LeWitt-inspired drawing, showing a series of horizontal SVG rectangles that are masked to reveal a circle in the center of the viewport. The code builds the visualization using D3.js methods, specifically `select`, `append`, `attr`, and the `join` operation to create and style the shapes. By setting each rectangle's `mask` attribute to a predefined SVG mask, the piece demonstrates how layered vector shapes can create a generative, minimalist artwork. The rendered output uses SVG and occupies the full browser window.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using SVG masks and layered rectangles in D3 v7. It shows two sets of alternating horizontal and vertical stripes, each confined to a circular region in the center of the screen. The code uses `d3.select`, `d3.range`, and data joins to generate 100 rectangles per direction, while SVG `<mask>` elements with black-and-white circles define the visible circular areas. The rendering is fully SVG-based and responds to the full window size.

Nnim@brejnholt.dk
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3 to generate a grid of alternating horizontal and vertical bands across the full viewport. Two masks reveal circular cutouts: the first exposes a black circle on a transparent background, while the second creates an inverse pattern. The code uses D3's `select`, `append`, and `join` APIs to efficiently construct SVG rectangles from `range(n)` data, with masks defined via SVG `mask` elements containing `rect` and `circle` shapes, rendering entirely as vector graphics.

Mma-jacobs
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3 - One Shape

This example reproduces a Sol LeWitt-inspired geometric artwork using D3 v3 with SVG rendering. It displays 100 horizontal and 100 vertical rectangles layered over each other, with circular masks creating a central circular reveal and its inverted counterpart. The code uses `d3.select` to append an SVG element, `d3.range` and data joins via `.join('rect')` to generate the rectangles, and SVG `<mask>` elements with appended rect and circle shapes to define the visibility patterns. The rendering dynamically fills the browser window based on `window.innerWidth` and `window.innerHeight`.

Kkathrynrbernard
93% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders 100 horizontal SVG rectangles at staggered y-positions, each masked by a circular cutout centered on the viewport. The code uses d3.select to append an SVG element sized to the window, binds data via .data() and .join(), and applies a reusable mask defined with SVG’s mask and circle elements. The resulting composition layers thin striped bands inside a circular aperture, evoking LeWitt’s geometric wall drawings. Rendering is done entirely with declarative SVG attributes, with no external data source.

Cchacon1@uic.edu
92% match
Loading thumbnail…

Sol LeWitt Reproduction with d3

This piece reproduces a Sol LeWitt drawing using D3 and SVG renderings. Two sets of 100 thin rectangles are drawn—one horizontal and one vertical—creating a grid-like pattern. Each set of rectangles is masked by a circular region: the horizontal bars use a mask with a central white circle on black, while the vertical bars use an inverse mask with a black circle on white. The result shows a grid within a circular window, with the horizontal and vertical lines swapping visibility inside and outside the circle. The code uses `d3.select`, `d3.range`, `svg.append`, and `.join()` to build the SVG elements and masks programmatically.

Yyankesswang
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-style drawing using intersecting striped rectangles and circular masks. It renders two sets of perpendicular lines—horizontal and vertical—each composed of 100 thin `rect` elements, with overlapping regions revealed through the use of SVG `mask` elements and circles. The visualization uses D3 v7’s `select`, `range`, and `join` methods to generate and bind data, drawing directly to an SVG canvas sized to the browser window. The complementary masks create a striking negative-space circle in the center.

PPetrescu Alexandru
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js version 6.6.1 in an SVG rendering. It displays a grid of thin horizontal and vertical rectangles, masked so they only appear within two overlapping circular regions at the center of the screen. The code uses `d3.select` to append SVG elements, `d3.range` to generate data arrays, and the `.join()` pattern to bind data to `rect` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) define visibility, with the first using a black background and white circle, the second inverted.

CCurran Kelleher
92% match
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, building an SVG scene with horizontal and vertical rectilinear bands. The code creates 100 horizontal stripes, each 10 pixels tall, and applies an SVG circular mask to reveal a circular cutout. A second complementary mask isolates a circular region for vertical stripes, creating an intersecting pattern. Rendered entirely through SVG elements, the piece uses D3’s `select` and chained `append`/`attr` methods for DOM construction, with data driven by a simple loop. The visualization fills the browser window, reflecting the code’s dependence on `window.innerWidth` and `window.innerHeight`.

JJinpeng Li
92% match