Sol LeWitt in JS

100%

Sol LeWitt in JS

✓ Published0🌍 Public

Last edited Jun 30, 2024

Created on Jun 30, 2024

This example renders a full-screen SVG of 100 vertical rectangles, spaced incrementally across the width, to approximate a minimalist scatterplot or grid composition reminiscent of Sol LeWitt’s geometric art. The page sets up an SVG namespace using `document.createElementNS` and dynamically appends each `rect` element with fixed width and height equal to the viewport. The code directly uses the `window.innerWidth` and `window.innerHeight` properties to size the canvas, with no external libraries. The result is a clean, repeating pattern that emphasizes structure and rhythm over data variation.

AI-generated description

Approximation of a scatterplot

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol Lewitt

This example renders a full-screen SVG composed of one hundred vertical rectangles, each ten pixels wide, spaced twenty pixels apart. The rectangles are created programmatically using the native Document Object Model API, with `document.createElementNS` and `setAttribute` to construct each SVG `rect` element. The `window.innerWidth` and `window.innerHeight` properties define the canvas dimensions, while the fixed loop count determines the layout. The result is a minimalist, grid-like pattern inspired by Sol LeWitt’s geometric wall drawings, though no data source or interaction drives the composition.

BBaptPoi

90% match

Loading thumbnail…

SVG Sol LeWitt

This example renders a grid of thin vertical rectangles across the full viewport using raw SVG elements. It creates 48 rectangles via `document.createElementNS` for the SVG namespace, positioning each at 20-pixel intervals with a fixed width of 10. The rectangles span the entire window height, producing a minimalist, repetitive pattern reminiscent of Sol LeWitt’s wall drawings. The code sets the SVG’s dimensions to `window.innerWidth` and `window.innerHeight`, and dynamically appends the SVG to the document body. No external libraries are used; only native JavaScript and SVG APIs.

Mmax-31

89% match

Loading thumbnail…

Sol LeWitt

This example displays 50 vertical rectangles arranged in a repeating grid, filling the browser window with a pattern inspired by Sol LeWitt’s minimalist art. Each rectangle is positioned at an x-coordinate of 20 times its index, with a fixed width of 10 and a height equal to the full viewport. The visualization uses the SVG namespace and dynamically creates elements via `document.createElementNS`, setting width and height attributes from `window.innerWidth` and `window.innerHeight`. The code appends all shapes to a single SVG container without any interaction or data-driven updates.

Aavcwisesa

89% match

Loading thumbnail…

Sol LeWitt in Vanilla JS

This example renders a generative art piece inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates a full-screen SVG canvas and populates it with a series of vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the entire window width. The code uses `document.createElementNS` and `setAttribute` to construct SVG elements dynamically, looping to cover the viewport’s width. The result is a minimal, grid-based composition that directly translates the artist’s geometric aesthetic into a browser-based visualization.

Jjv

88% match

Loading thumbnail…

Sol Lewitt Piece

This example reproduces a Sol LeWitt-style drawing using only JavaScript and the Document Object Model (DOM). It generates a full-screen SVG canvas and fills it with 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, creating a rhythmic, wall-like grid pattern. The code uses `document.createElementNS` to construct SVG elements directly, without any external libraries, and sets the canvas dimensions to the browser window’s inner width and height. The rendering is purely algorithmic, based on a loop that iterates through horizontal positions, with no external data source.

Yyejichun@naver.com

88% match

Loading thumbnail…

Sol LeWitt

This example generates a vertical field of narrow, evenly spaced black rectangles across the full height of the browser window, creating a rhythmic, striped composition reminiscent of Sol LeWitt’s wall drawings. It renders 100 SVG `<rect>` elements directly onto an `<svg>` created with the DOM API `document.createElementNS`. The rectangles are positioned incrementally along the x-axis at 20-pixel intervals, each with a fixed width of 10 pixels, while the height is set to match the window’s inner height. No external libraries are used; the visualization relies solely on native SVG parsing and JavaScript.

EEd Smale

88% match

Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt art piece using JavaScript to generate an SVG. It renders a series of 100 vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across a 960-pixel-wide canvas. The code creates the SVG elements dynamically through the DOM API without any external libraries, directly appending each rectangle to the document body. The artwork is defined procedurally, with the number of rectangles and their spacing hardcoded in a loop.

DDilara Bozkurt

88% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric composition using a grid of vertical SVG rectangles. The code generates 100 thin, evenly spaced bars that span the full height of the browser window, creating a rhythmic, minimal pattern. It builds the SVG dynamically with the Document Object Model (DOM) API, using methods like `createElementNS` and `setAttribute` to construct and style each rectangle. The visualization responds to the current viewport dimensions, filling the entire screen with its structured, monochrome array.

Aandu006@gmail.com

88% match