100%

Sol LeWitt reproduction attempt 2

✓ Published1🌍 Public

Last edited Nov 14, 2021

Created on Nov 14, 2021

This example reproduces a Sol LeWitt-inspired composition using JavaScript and the SVG DOM API, displaying a full-screen field of evenly spaced black vertical bars on a white background. The code creates an SVG element sized to the browser window and uses a `for` loop to append `rect` elements with a fixed bar width and gap. The number of bars is computed dynamically from the window width, ensuring the pattern fills the screen. This approach demonstrates direct manipulation of SVG elements without any external libraries.

AI-generated description

Sol LeWitt

A reproduction of a Sol LeWitt art piece

Using javascript to create svg elements in the dom

This is the first clue

const w3 = "http://www.w3.org/2000/svg"
const svg = document.createElementNS(w3, "svg")
svg.setAttribute("width", 960)
svg.setAttribute("height", 500)
document.body.appendChild(svg)

Create many vertical bars of width 20 with a gap of 20

Then having a home grown go at a for loop.

Note the height 100%
Note the 2 * barWidth below for a gap equal to the bar width
note const newRect is block scoped so it all starts again on every iteration of the for loop

const barWidth = 20
      
for (let i = 1; i <= 22; i++) {
  const newRect = document.createElementNS(w3, "rect")
  newRect.setAttribute("x", (i * 2 * barWidth))
  newRect.setAttribute("width", barWidth)
  newRect.setAttribute("height", "100%")
  newRect.setAttribute("fill", "black")
  svg.appendChild(newRect)
}

MIT Licensed

Similar vizzes

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

90% 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

90% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric composition using only straight vertical bars of uniform width. The code generates 100 rectangles in an SVG element, each spaced 20 pixels apart with a 10-pixel width, extending the full height of the viewport. It uses the DOM API’s `createElementNS` and `setAttribute` methods to construct and style the SVG shapes directly. The artwork fills the entire browser window by setting the SVG’s dimensions to the window’s inner width and height, creating a minimalist, repeating pattern that echoes LeWitt’s instructional art.

CCurran Kelleher

89% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired wall drawing using dynamically generated SVG rectangles. It renders 100 vertical bars of fixed width, spaced evenly across the full viewport height, creating a minimalist grid pattern that fills the browser window. The visualization works by creating an SVG element with the DOM API `document.createElementNS`, setting its dimensions to match the window, and appending each rectangle with explicit `x`, `width`, and `height` attributes. No external libraries are used; it relies entirely on native JavaScript and SVG shape creation.

WWasanta Pruttisarikorn

89% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece by rendering a series of vertical black bars. Fifty rectangles, each 10 pixels wide, are spaced 20 pixels apart across the full screen height. The visualization is built entirely with the SVG API, creating elements via `document.createElementNS` and appending them to the root `<svg>`. The code runs automatically on page load, filling the browser window with the geometric pattern.

WWolfgang

89% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece as an interactive web page, displaying a series of vertical black bars that repeat across the full height of the browser window. The rendering uses the raw SVG DOM API, creating 100 rectangle elements with `document.createElementNS` and positioning them at 20-pixel intervals. Each rectangle is 10 pixels wide and stretches to the viewport height, producing a clean, minimalist grid pattern that mirrors LeWitt’s geometric style. The code directly manipulates SVG attributes without any additional libraries or data sources.

Hhsleijpen

89% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired geometric composition using raw SVG and JavaScript. It shows a systematic grid of thin, evenly spaced vertical bars that span the full height of the viewport, creating a rhythmic, minimalist pattern reminiscent of LeWitt’s wall drawings. The code creates an SVG container sized to the browser window and appends 100 rectangles, each positioned at increasing x-coordinates with a fixed width, using the `document.createElementNS` API for SVG elements. The rendering relies solely on native DOM manipulation and CSS styling via an embedded stylesheet, with no external libraries beyond a Google Font import for the text styling.

Mmaciekawsq@gmail.com

89% match

Loading thumbnail…

sol lewitt reproduction

This example reproduces a Sol LeWitt-style minimalist composition using dynamically generated SVG rectangles. The code creates 100 vertical black bars, each 10 pixels wide, spaced 20 pixels apart across the full height of the browser window, filling the viewport edge-to-edge with a rhythmic grid. It uses the raw DOM API `document.createElementNS` to construct SVG elements, setting width, height, and position attributes directly on each `<rect>`. The rendering approach mirrors LeWitt’s conceptual art by deriving form from a simple algorithmic rule: a loop variable determines each bar’s x-coordinate and index.

MMehul Suthar

89% match