Lesson - Sol LeWitt reproduction

100%

Lesson - Sol LeWitt reproduction

✓ Published1🌍 Public

Last edited Sep 20, 2022

Created on Sep 20, 2022

This example reproduces a Sol LeWitt-style drawing using raw SVG elements generated through JavaScript. It creates a full-screen SVG canvas and populates it with one hundred vertical rectangles, each 10 pixels wide, spaced 20 pixels apart, filling the viewport’s height. The code uses the Document API’s `createElementNS` to programmatically construct SVG `<rect>` nodes and appends them to the document body, with CSS setting the fill to black. The result is a minimalist, grid-like pattern of evenly spaced black bars across the screen.

AI-generated description

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

Similar vizzes

Loading thumbnail…

SOL LEWITT REPRODUCTION

This example reproduces a Sol LeWitt-style drawing using only JavaScript and SVG, rendering a series of vertical black rectangles across a white canvas. The code creates a full-window SVG element and programmatically appends 100 narrow rectangles, each spaced 20 pixels apart with a width of 10 pixels, using the `createElementNS` API from the SVG specification. The rectangles stretch the full height of the viewport, producing a minimalist grid-like pattern that echoes LeWitt's geometric wall drawings. The piece demonstrates generative art through direct DOM manipulation without any external libraries.

JJude-Clarke

89% match

Loading thumbnail…

Lesson - Sol LeWitt reproduction Vertical portion

This example reproduces a vertical portion of a Sol LeWitt wall drawing using SVG. It shows a series of thin horizontal rectangles clipped by a circular mask, creating a striking geometric composition of striped bands within a circular boundary. The code builds the SVG dynamically with `document.createElementNS`, setting a `mask` element containing a white circle to reveal the rectangles. The mask uses a black background rect and a white circle to define the visible region, with all elements generated through a simple JavaScript loop.

Aastrologyhesitant

89% match

Loading thumbnail…

Sol Lewitt Reproduction

This example reproduces a Sol LeWitt-inspired wall drawing using raw SVG elements created directly through the DOM API. It shows a series of 100 thin vertical rectangles evenly spaced across the full height of the browser viewport, creating a minimalist striped pattern. The visualization uses `document.createElementNS` to generate SVG `rect` elements, setting each rectangle’s width to 10 pixels and its horizontal offset to 20 pixels apart. No external libraries are used, relying purely on vanilla JavaScript and CSS to render the geometric composition dynamically based on the window size.

HHéloïse Feldmann

88% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a minimalist Sol LeWitt-style drawing using an SVG canvas that fills the browser window. It generates 100 vertical rectangular stripes, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the viewport. The code creates SVG elements dynamically via the `createElementNS` API and sets attributes like `x`, `width`, and `height` directly, without any external libraries. The rendering approach relies purely on JavaScript and SVG, with no data source or interaction beyond the static geometric composition.

MMonWas

88% match

Loading thumbnail…

Sol LeWtt Reproduction

This example reproduces a minimalist Sol LeWitt-inspired drawing using only SVG and JavaScript. It generates a series of 100 vertical rectangles with varying widths, creating a rhythmic grid pattern that spans the full height of the viewport. The code uses the Document Object Model (DOM) method `createElementNS` to construct SVG elements directly, with a simple `for` loop to position each rectangle horizontally. No external libraries are required—only standard JavaScript and CSS within a single HTML file. The result is a clean, geometric composition that fills the window dynamically.

DDanilo Moraes

87% match

Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt drawing using an SVG canvas. It shows a single black square rectangle positioned at the top-left corner of a 960×500 pixel viewport. The code creates the SVG and rectangle elements dynamically using the DOM API `document.createElementNS` with the SVG namespace, then appends them to the page body. The rectangle’s dimensions are set via `setAttribute`, though its fill color is commented out, leaving it with the default black.

SSantiago Toso

87% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a minimalist Sol LeWitt drawing using programmatically generated vertical bars. It fills the browser viewport with 100 thin SVG rectangles, evenly spaced 20 pixels apart and spanning the full window height. The code uses the raw Document Object Model (DOM) API with `createElementNS` to construct SVG elements directly, setting viewport dimensions from `window.innerWidth` and `window.innerHeight`. No external libraries are used; the rendering relies purely on vanilla JavaScript and CSS.

TTheo-0201

86% match

Loading thumbnail…

Sol LeWitt Reproduction

This example displays a Sol LeWitt-inspired geometric composition, rendering a series of vertical black bars across a white background. The code creates a full-screen SVG canvas using the native JavaScript `document.createElementNS` API. It draws 100 rectangles, each 10 pixels wide and spaced 20 pixels apart, with heights set to match the viewport’s inner height. The rigid, repeated pattern mirrors LeWitt’s minimalist wall drawings, and the approach directly translates a simple algorithmic grid into scalable vector graphics.

Rroyable88

86% match