LeWitt Recreation w/ JS & SVG

100%

LeWitt Recreation w/ JS & SVG

✓ Published1🌍 Public

Last edited Sep 27, 2023

Created on Sep 27, 2023

A minimalist digital recreation of Sol LeWitt's geometric wall drawings uses JavaScript and SVG to layer a grid of black rectangles over a large white circle and a contrasting white rectangle over a black circle, with two SVG masks controlling visibility. The code constructs all shapes dynamically via DOM creation methods like `createElementNS` and `setAttribute`, requiring no external libraries, and renders at full window dimensions. The masks invert the patterns, producing an interplay of intersecting horizontal and vertical lines across the canvas.

AI-generated description

A bare minimum HTML page demonstrating use of D3 following the course of Curran Kelleher on YouTube

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Sol LeWitt Reproduction Final

This example reproduces a Sol LeWitt wall drawing using pure JavaScript and SVG APIs. It shows a grid of horizontal and vertical striped rectangles overlaid with two circular masks, creating a composition of intersecting lines that fade into a central circle. The code builds SVG elements dynamically via `document.createElementNS`, applying a black-to-white mask and an inverted white-to-black mask to reveal alternating line directions. One hundred horizontal strips and one hundred vertical strips are generated in loops, with the masks controlling visibility to form the final geometric pattern.

AAndre J Denais

88% match

Loading thumbnail…

Sol Lewitt Variante

This example recreates a Sol LeWitt-inspired wall drawing as an interactive SVG visualization. The artwork shows a grid of thin horizontal and vertical lines that are visible only within two overlapping circular masks, creating a crosshatched pattern inside the circles against a blank background. The code uses plain JavaScript with the SVG DOM API, creating mask elements and hundreds of rect primitives programmatically. A black-filled mask with a white circle reveals the horizontal lines, while an inverted mask with a black circle reveals the vertical lines, demonstrating a simple yet effective clipping technique.

Iibaird6@gatech.edu

87% match

Loading thumbnail…

Sol LeWitt Exercise with JS

An SVG built with vanilla JavaScript recreates a Sol LeWitt-inspired wall drawing by layering two sets of 100 striped rectangles. Horizontal and vertical black bars cross the full viewport, but a pair of circular masks restricts visibility: one mask shows only the horizontal stripes inside a 200-pixel circle, while the second reveals vertical stripes outside that same radius. The result is a clean, conceptual grid where the two orientations visually swap at the circle's boundary, using the SVG `mask` element and dynamic element creation via `document.createElementNS`.

Ppkdvalis

87% match

Loading thumbnail…

Sol LeWitt Repro w/ vanilla JS

A full-screen SVG reproduction of a Sol LeWitt wall drawing displays two interlocking sets of thin vertical and horizontal bars. A central circular mask inverts the visibility of the two grids, creating a stark contrast between the denser vertical lines inside the circle and the horizontal lines outside. The piece is built with vanilla JavaScript, dynamically creating SVG elements and applying mask definitions without any external libraries. The code generates one hundred vertical and one hundred horizontal rectangles, using the `mask` attribute to alternate their visibility based on the circle’s boundary.

Hhelloelectro

87% match

Loading thumbnail…

Sol LeWitt Reproduction

A minimalist web reproduction of Sol LeWitt’s geometric wall drawings, rendered as layered horizontal and vertical stripes in SVG. A circular mask isolates the intersection of the two sets of lines, creating a focal point against a full-screen canvas. The code constructs SVG elements programmatically via the DOM API, using two masks (`circle-mask` and `circle-mask-2`) and nested rects to alternate visible segments. It employs no external libraries, relying purely on native browser methods like `createElementNS` and `setAttribute` to draw 100 stripes in each direction.

Rrune@noergaard.dk

87% match

Loading thumbnail…

Sol LeWitt reproduction Vertical

A web-based reproduction of Sol LeWitt's wall drawing, rendered as a full-screen SVG using programmatic JavaScript. The piece displays a grid of thin, alternating horizontal and vertical gray bars, with a circular mask that inverts the contrast in the center, creating a subtle optical effect. It uses the raw SVG DOM API (`createElementNS`) to build elements, applying two masks (`circle-mask` and `circle-mask2`) to control visibility. The design is generated entirely in code, with no external libraries, drawing 100 horizontal and 100 vertical rectangles.

DDilara Bozkurt

87% match

Loading thumbnail…

My Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt wall drawing using only raw JavaScript and the SVG API. It shows a grid of alternating horizontal and vertical stripes masked into two triangular shapes, creating a geometric interplay of line and form. The code builds an SVG canvas, defines two circle masks containing white and black triangles, and then appends 50 horizontal and vertical rectangle strips. These strips use the masks to reveal the triangular compositions, directly mimicking LeWitt’s instruction-based art without any external libraries.

Aaryan0821

87% match