LeWitt Repr

100%

LeWitt Repr - Custom

✓ Published0🌍 Public

Last edited Dec 31, 2022

Created on Dec 29, 2022

This visualization reproduces a Sol LeWitt-inspired drawing by dividing the screen into five rectangular quadrants, each containing dense sets of thin, angled line strokes. The composition shows a systematic pattern of repeated ruled lines that appear to radiate from or rotate around each quadrant’s center. The code uses D3 v6 selections with `join()` to append groups and rectangles, applying SVG masks to clip line patterns within each quadrant. Lines are generated from a range of 1000 values, positioned horizontally and rotated via `transform`, with the canvas sized to the full window dimensions.

AI-generated description

Sol LeWitt Reproduction

MIT Licensed

Similar vizzes

Loading thumbnail…

LeWitt Reproduction vertical

This example recreates a Sol LeWitt-inspired drawing using only SVG elements, producing a grid of alternating horizontal and vertical lines that intersect within two circular masks. The code generates 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, and uses two SVG masks—one with a white circle on black and another with a black circle on white—to reveal different line orientations in concentric regions. The visualization is built entirely with native DOM methods like `createElementNS` and `setAttribute`, without relying on D3.js, despite the accompanying `index.js` file importing `select` from D3.

Bbindas1

85% match

Loading thumbnail…

LeWitt Repr with D3

This example uses D3 v3 to recreate Sol LeWitt’s geometric wall drawings as an interactive SVG. Two alternating stripe patterns—horizontal and vertical—are clipped by two masks, each divided into alternating black-and-white bands. Within each band, a different D3 symbol (from `d3.symbols`) appears in the inverted color, creating a shifting mosaic of shapes and lines. The SVG scales to the full window, and a CSS `:hover` rule slowly transitions the page background to green over three seconds.

CCaroline Ghisolfi

84% match

Loading thumbnail…

sol lewit reproduction assignment

This visualization reproduces the geometric precision of Sol LeWitt’s wall drawings using D3.js, encoding alternating vertical and horizontal line grids. It renders a series of thin rectangles that are selectively masked by SVG masks containing paths of abstract symbols, creating overlapping patterns of positive and negative space. The code leverages D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate the grids and symbol paths, with masks (`url(#mask0)`, etc.) toggling visibility. The result is a dynamic, screen-sized composition that mirrors LeWitt’s systematic, rule-based aesthetics through algorithmic drawing.

KKerim

84% match

Loading thumbnail…

LeWitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing as a vertical field of narrow, evenly spaced rectangles rendered in SVG. The visualization fills the entire browser window, with each rectangle positioned incrementally along the horizontal axis using a loop that creates 100 elements. The code uses native DOM manipulation via `document.createElementNS` and `svg.setAttribute` to construct the scene, without relying on external libraries. The page dynamically sizes the artwork to the viewport through `window.innerWidth` and `window.innerHeight`, and includes commented-out mask and circle code that is not active in the final render.

Ggrassfluffy02

84% match

Loading thumbnail…

LeWitt Recreation w/ D3

This example recreates a Sol LeWitt-style geometric drawing using D3.js v7 and SVG rendering. It displays a grid of horizontal and vertical black bars overlaid on a full-window canvas, with a circular mask creating a central void. The code uses D3's `select`, `range`, and `join` to generate 100 rect elements in each orientation, while SVG `mask` elements with white and black shapes define the visible regions. The result is a minimalist pattern that demonstrates simple masking and data-driven shape generation.

MMarvin Frede

83% match

Loading thumbnail…

This interactive SVG reproduction of Sol LeWitt’s wall drawing uses masked striped rectangles to create a checkerboard pattern overlaid with a central circular window. The page renders 100 horizontal and 100 vertical stripes, each 10 pixels thick, layered across the full viewport. Two SVG masks—one with a white circle on black, the other inverted—selectively reveal stripes inside or outside the circle, mimicking the artist’s geometric style. A CSS hover transition on the circular area changes its fill to green over three seconds, adding subtle interactivity.

CCaroline Ghisolfi

83% match

Loading thumbnail…

Sol LeWitt Reproduction D3

This visualization reproduces a Sol LeWitt drawing using D3.js, displaying a grid of alternating horizontal and vertical black lines that form a circular pattern. It uses SVG masks with two complementary circular cutouts to create the intersecting line effect. The code leverages D3’s `select`, `range`, and `join` APIs to generate and bind 48 rectangles in each orientation, with each set masked to reveal only the portion inside or outside the circle.

Ttverdone

83% match

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical lines that intersect to form a subtle pattern across the full browser viewport. The piece relies on two SVG masks—one circular and one rectangular—to selectively reveal or hide portions of the line arrays. Specifically, a path generated via `symbol(symbols[1],100000)` creates a large circular mask over the vertical lines, while a black circle mask obscures the horizontal lines in a contrasting region. The code uses D3’s `select`, `range`, and `join` APIs to efficiently append hundreds of SVG rect elements, with all rendering performed client-side in SVG format.

Gguts

83% match