Skip to main content
SimilarExport ZIP
100%

Sol LeWitt in Vanilla JS

✓ Published0🌍 Public
Jjv
Last edited May 2, 2023
Created on May 2, 2023
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol lewitt vanilla js

A generative art piece renders a grid of horizontal and vertical rectangles as SVG elements, creating a striped pattern across the full browser viewport. The layout uses two SVG masks to selectively reveal the stripes: a circular mask exposes a central disk of horizontal bands, while an inverse mask reveals the remaining area filled with vertical bands. Built with vanilla JavaScript and the SVG DOM API via `document.createElementNS`, the visualization constructs all shapes procedurally without any external libraries, directly manipulating attributes like `x`, `y`, `width`, and `height`.

Ddwikbtn
91% match
Loading thumbnail…

Fork of Sol LeWitt in vanilla js

This example generates an abstract, generative artwork inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates 100 vertical rectangles, each positioned at increasing x-coordinates across the full browser window. The code uses the Document Object Model (DOM) API `document.createElementNS` with the SVG namespace to construct the elements, setting attributes like width, height, and position via `setAttribute`. The rendering approach relies entirely on procedural generation, with no external data source, producing a minimalist grid-like pattern of thin bars against a blank background.

Rrwata97
91% match
Loading thumbnail…

JS VANILLA SOL LEWITT

This example creates a generative geometric composition inspired by Sol LeWitt using vanilla JavaScript and SVG. It renders 100 vertical and 100 horizontal rectangular strips, each 10 pixels wide or tall, across the full viewport. The strips are masked using two SVG `mask` elements: a circle mask for horizontal rectangles and a rectangle mask with a circular hole for vertical ones. The result is a grid of lines that appears only within a central circle, with the surrounding area showing the full-width vertical stripes. The code builds all elements dynamically via `document.createElementNS`.

Rrespingu
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
90% match
Loading thumbnail…

Sol LeWitt

This example renders a generative composition inspired by Sol LeWitt using raw SVG creation via JavaScript. It constructs a full-screen SVG and uses two masks to create a circular cutout: one mask reveals vertical stripes outside the circle, while another reveals horizontal stripes inside it. The code manually creates SVG elements using the `document.createElementNS` API and sets attributes directly, without using any external libraries. The result is a static, geometric pattern of 100 vertical and 100 horizontal rectangular stripes that alternate based on their position relative to the central circle.

JJamie
90% match
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
90% match
Loading thumbnail…

Sol lewitt

This example renders an interactive-free generative drawing inspired by Sol LeWitt, filling the browser viewport with a series of vertical bars. The artwork is created using raw SVG elements via the Document Object Model API, specifically `createElementNS` and `setAttribute`, inside a plain HTML page. A loop of 100 iterations draws rectangles with a fixed x-position and incrementing width, extending full height, producing a striped composition. The code relies solely on vanilla JavaScript and SVG, with no external libraries, and automatically adapts to the window's dimensions.

EErik L
90% match
Loading thumbnail…

Sol LeWitt

This example generates a minimalist SVG composition inspired by Sol LeWitt, displaying 100 vertical rectangles evenly spaced across a 960-by-500-pixel canvas. Each rectangle maintains a fixed width of 10 pixels and spans the full height of the canvas, creating a rhythmic, striped pattern. The visualization is built programmatically using raw JavaScript and the SVG API, specifically creating SVG elements via `document.createElementNS` and appending them to the document. No external libraries are used; the rendering relies entirely on native browser support for SVG and scripting.

NNikki Masroor
90% match