Skip to main content
SimilarExport ZIP
100%

Sol Levitt's Art Reproduction

✓ Published1🌍 Public
Jjajinkyaa
Last edited Oct 30, 2022
Created on Oct 30, 2022

This visualization reproduces Sol LeWitt's geometric art using overlapping horizontal and vertical striped rectangles, masked to form a circular composition in the center of the viewport. The piece shows a grid-like pattern of alternating bands that intersect within a defined circular boundary against a contrasting background. The code uses D3.js selections and data joins (`selectAll`, `data`, `join`) to generate 100 horizontal and 100 vertical SVG rectangles across the full window dimensions. Two SVG masks (`circleMask`, `circleMask2`) apply inverted circle shapes to reveal or hide portions of the layered stripes, creating the characteristic LeWitt-style interplay of line and form.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt-style geometric artwork using overlapping horizontal and vertical striped rectangles, with a circular mask creating a central focal point. The horizontal bands rotate continuously via a CSS keyframe animation applied to the SVG elements. Built with D3.js, the code uses `select` and `range` to generate 100 rectangles in each direction, while two SVG masks (`circle-mask` and `circle-mask-2`) alternately reveal and hide the stripes, producing an inverted circular pattern at the center.

GGayan Priyadarshana
93% match
Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by generating a grid of horizontal and vertical stripes that are partially revealed through two circular masks. The horizontal stripes are masked by a circle with a white fill on a black background, while the vertical stripes use the inverse mask, creating a cross-like interplay of lines within the circular region. Built with D3 v6, the code uses `selectAll` and `join` to create 100 rectangles in each direction, with `range(n)` providing the data. The SVG masks, defined via `mask` and `circle` elements, control which parts of the stripes are visible.

Jjv
91% match
Loading thumbnail…

Fork of Sol Levitt's Art Reproduction2

This visualization reproduces a Sol LeWitt-inspired drawing using intersecting horizontal and vertical striped rectangles, with two mask layers creating a circular cutout effect. The piece shows a dense grid of lines that forms a geometric composition with a central diamond-shaped aperture. Built with React and D3.js, the code uses `select`, `range`, `symbol`, and `symbols` to generate SVG elements, while custom masks (`circleMask` and `circleMask2`) combine black-and-white fills to blend the line patterns selectively. The result is a dynamic interplay of overlapping stripes and negative space, rendered responsively to the browser window dimensions.

Jjajinkyaa
91% match
Loading thumbnail…

Sol LeWitt

This visualization reproduces Sol LeWitt’s geometric style using overlapping horizontal and vertical stripe patterns. It shows a large circular mask that reveals alternating bands of stripes against a contrasting background. The code uses raw SVG elements via `document.createElementNS` to construct rectangles, masks, and circles. A single white circle and black circle are combined with two masks to clip the stripe layers, creating an interplay of positive and negative space. The rendering relies on SVG’s mask attribute and fills the full viewport with 100 stripes in each direction.

Ddalia.miliauskaite@me.com
91% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing by assembling a grid of horizontal and vertical stripes that intersect to form a circular void at the center. The piece renders 100 horizontal rectangles masked by a black circle, while a second set of 100 vertical rectangles uses an inverted mask with a white circle, creating a complementary pattern of visible lines. Built with the HTML DOM and SVG APIs, the visualization constructs elements directly via JavaScript, using `createElementNS`, `setAttribute`, and SVG mask definitions to achieve the geometric composition. The result is a computational homage to LeWitt's conceptual art, where simple algorithmic rules generate complex visual interplay.

Ccharlieronchetti@gmail.com
90% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using D3.js to generate a grid of horizontal and vertical striped rectangles. The rendering uses SVG masks to create two overlapping circular cutouts, with horizontal lines visible in one circle and vertical lines in the other. The code builds the visualization with D3 selections, `range`, and mask elements, sizing it to the full browser window.

LLohitB
90% match
Loading thumbnail…

Sol Lewitt reproduction itv d3 correctly

This visualization reproduces a Sol LeWitt-inspired geometric composition using two overlapping grids of thin rectangles: horizontal bars masked to reveal a white circle, and vertical bars masked to form the complementary black circle. The code builds an SVG canvas using d3-selection, generating 100 rectangles per axis via d3.range and data joins. Two SVG masks define the circular regions, with one mask inverting the other to create the contrasting shapes.

Cclara7227
90% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT drawing using raw SVG and JavaScript, without any external libraries. It renders 100 horizontal and 100 vertical striped rectangles that intersect to create a geometric grid, with two circular masks applied to reveal different portions of the stripes. The `mask` element and `circle` primitives define a central circular boundary, while the second mask inverts its effect. The visualization spans the full browser window by reading `window.innerWidth` and `window.innerHeight`. The code constructs SVG elements programmatically via `document.createElementNS` and sets attributes directly, demonstrating a minimal approach to generative art.

TTheo-0201
90% match