Sol LeWitt in Vanilla JS

100%

Sol LeWitt in Vanilla JS

✓ Published0🌍 Public

Last edited Oct 28, 2023

Created on Oct 26, 2023

This example recreates Sol LeWitt’s geometric wall drawings using only vanilla JavaScript and SVG, with no external libraries. It generates a series of lines and shapes directly in the DOM via `document.createElementNS` to build an SVG canvas. The code demonstrates manual SVG construction by creating a root `svg` element, appending a background `rect`, and drawing minimal geometric forms. It highlights fundamental browser APIs for creating and manipulating SVG elements without D3’s helper functions.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

Test Heading

test

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt in Vanilla JavaScript

This example recreates a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API, with no external libraries. The SVG dynamically adapts to the browser window’s dimensions, generating a composition of alternating horizontal and vertical bars. It uses SVG `<mask>` elements with circles to clip the bar patterns, revealing a circular region in the center where the orientation of the lines shifts, mimicking the geometric interplay found in LeWitt’s conceptual art. The code builds all shapes procedurally via `createElementNS`.

Xxinyuwangxyw

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

This example reproduces a Sol LeWitt wall drawing using only Vanilla JavaScript and the SVG API. It constructs an SVG scene with a white rectangle and a black circle defined as a mask, then renders 100 horizontal stripes as individual SVG `<rect>` elements. Each rectangle’s visibility is filtered through the circular mask, creating the artwork’s characteristic banded composition within a circular boundary. The code dynamically sets the canvas to the browser’s full window dimensions and uses no external libraries or data sources.

Ppeter@attachmentdivision.com

87% match

Loading thumbnail…

Sol LeWitt Creation

This example generates a full-screen SVG that reproduces Sol LeWitt’s minimalist wall drawings. It creates a grid of 50 narrow vertical rectangles, each ten pixels wide and spaced twenty pixels apart, which collectively fill the entire browser viewport. The piece demonstrates the use of the Document Object Model (DOM) API’s `createElementNS` method to construct SVG elements directly through JavaScript, rather than employing a library like D3. The code iterates a loop, appending each rect to the SVG root, whose dimensions are set from `window.innerWidth` and `window.innerHeight`. The result is a clean, algorithmically generated abstract composition.

Ddexuzi

86% match

Loading thumbnail…

Sol LeWitt

This example draws a single red square onto an SVG canvas, echoing the minimalist geometric style of Sol LeWitt. The code creates SVG elements using the native `document.createElementNS` API for SVG, adds a `rect` with fixed width and height attributes, and appends it to the page. It demonstrates fundamental SVG rendering with vanilla JavaScript, setting the stage for further generative art.

SSantiago Toso

85% match

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired drawing using only browser-native SVG and JavaScript. It shows a field of thin blue horizontal lines covering the full viewport, overlaid with a row of concentric white circles, and one fully filled white circle at the center. The code creates these shapes imperatively via the SVG DOM API, appending `rect` and `circle` elements inside a loop. It uses `document.createElementNS` for SVG namespace creation and `setAttribute` for geometry, with dimensions tied to `window.innerWidth` and `innerHeight`.

Aainhoadieruiz@gmail.com

85% match

Loading thumbnail…

Sol LeWitt reproductions

This example uses JavaScript and the SVG API to generate a geometric piece inspired by Sol LeWitt. It shows a grid of black vertical bars overlaid with repeating diagonal patterns of black and white circles, creating a sense of systematic repetition. The code creates SVG elements directly with `document.createElementNS`, setting attributes to position 100 rectangles and multiple circle rings across the full viewport. No external libraries are used; the rendering is purely procedural, and the visualization is static, with no interactivity or data input.

Llieta96

84% match

Loading thumbnail…

Sol LeWitt in vanilla js

Sol LeWitt’s geometric wall drawing is recreated as an abstract composition of green rectangles and small black tick marks on a white field. The page renders entirely through static SVG elements, with no JavaScript logic driving the layout. The artwork uses hard-coded coordinates and fills to mimic the artist’s systematic, rule-based style, presenting a faithful, non-interactive data-visualization homage in a bare HTML document.

Rrwata97

84% match