Fork of Sol LeWitt in vanilla js

100%

Fork of Sol LeWitt in vanilla js

✓ Published1🌍 Public

Last edited Apr 19, 2023

Created on Apr 19, 2023

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.

AI-generated description

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

Similar vizzes

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

91% match

Loading thumbnail…

Das Fork Sol LeWitt Repro

This example reproduces a Sol LeWitt–style wall drawing using raw SVG. It renders 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, filling the entire browser viewport. The code creates an SVG element dynamically via the Document Object Model API, using `document.createElementNS` for the `svg` and `rect` elements. The rectangle heights are set to the full window height, producing a minimalist grid pattern. No external libraries are used; the visualization relies solely on vanilla JavaScript and inline CSS styling.

DDasbach.EJ

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

88% match

Loading thumbnail…

Fork of SVG Fundamentals - Sol LeWitt repro follow-along

This example reproduces a Sol LeWitt art piece using dynamically generated SVG rectangles. The code creates 100 vertical black bars, each 10 pixels wide, evenly spaced across the full window height, filling the browser viewport. It uses the Document API (`createElementNS`) to build SVG elements from scratch within JavaScript rather than a dedicated visualization library. The rendering approach directly mirrors LeWitt’s geometric, minimalist style by iterating through a fixed count of shapes.

MMichael Gomersall

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

88% match

Loading thumbnail…

Fork of Sol Lewitt Reproduction vertical

This example reproduces a Sol LeWitt-inspired drawing using raw SVG and JavaScript without any external libraries. It renders two sets of overlapping rectangles: 100 horizontal stripes and 100 vertical stripes, both evenly spaced across the full window size. A circular mask, defined via the SVG `mask` element, restricts visibility of the horizontal stripes to a centered circle, creating a layered geometric effect. The code dynamically creates SVG elements using `document.createElementNS` and appends them to the page, with all dimensions derived from `window.innerWidth` and `window.innerHeight`.

HHéloïse Feldmann

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

87% match

Loading thumbnail…

Fork of Sol LeWitt practice

This example uses JavaScript and the SVG API to create a full-window, grid-like pattern of vertical bars. It calculates the number of bars needed based on the window’s width and a fixed bar length with padding, then dynamically generates and positions each SVG rectangle. The code uses `document.createElementNS` and `setAttribute` to construct the vector graphics, and `console.log` examples in the README illustrate basic variable reassignment with `let` and `var`. The result is a minimalist, striped composition that directly references Sol LeWitt’s geometric wall drawings.

Ppanthabuddhi@gmail.com

87% match