Skip to main content
SimilarExport ZIP
100%

Sol Lewitt Reproduction - Ronan

✓ Published0🌍 Public
RRonanFonseca
Last edited Aug 19, 2022
Created on Aug 19, 2022
Forked from SVG Fundamentals

This example reproduces a Sol LeWitt-inspired drawing using raw SVG elements created dynamically with JavaScript. It renders a series of vertical rectangles, each with a fixed width of 10 pixels, spaced 20 pixels apart across the full width and height of the browser window. The code uses `document.createElementNS` to construct SVG `rect` elements and appends them to an SVG container, with the canvas size set to `window.innerWidth` and `window.innerHeight`. No external libraries are used; the work relies solely on the SVG DOM API and a loop that generates the geometric pattern.

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 Reproduction

This example reproduces a Sol LeWitt-inspired wall drawing using raw SVG elements created directly through the DOM API. It shows a series of 100 thin vertical rectangles evenly spaced across the full height of the browser viewport, creating a minimalist striped pattern. The visualization uses `document.createElementNS` to generate SVG `rect` elements, setting each rectangle’s width to 10 pixels and its horizontal offset to 20 pixels apart. No external libraries are used, relying purely on vanilla JavaScript and CSS to render the geometric composition dynamically based on the window size.

HHéloïse Feldmann
92% 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 Reproduction Vertical

This example renders a vertical Sol LeWitt-inspired composition using raw SVG and JavaScript. It creates 100 rectangle elements, each 10 pixels tall and spaced 20 pixels apart, stacked vertically across the full width of the browser window. The rectangles are appended directly to an SVG element created via the Document API, with the total canvas size determined by `window.innerWidth` and `window.innerHeight`. No additional libraries are used; the code relies solely on native DOM manipulation and SVG attributes.

DDonald Bagwell
90% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a minimalist Sol LeWitt-style drawing using an SVG canvas that fills the browser window. It generates 100 vertical rectangular stripes, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the viewport. The code creates SVG elements dynamically via the `createElementNS` API and sets attributes like `x`, `width`, and `height` directly, without any external libraries. The rendering approach relies purely on JavaScript and SVG, with no data source or interaction beyond the static geometric composition.

MMonWas
89% 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
89% match
Loading thumbnail…

Sol Lewitt Reproduction

This example reproduces a Sol LeWitt wall drawing as a single static SVG rectangle, using a plain SVG element with a width and height set to 960 by 500 pixels. The code manually creates the SVG and a 100-by-100 rect child via the Document Object Model’s `createElementNS` method, relying on raw JavaScript rather than a charting library. It demonstrates basic SVG rendering with a fixed canvas, though the script appends the rect to the SVG before the document’s existing SVG is used, resulting in a minimal structural output. The work shows how geometric abstraction can be encoded directly through SVG API calls.

DDavid Hojdan
89% match
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using pure browser APIs, with no external libraries. It renders 100 horizontal and 100 vertical rectangles in SVG, layered so that a circular mask reveals the grid pattern at the center while masking the opposite orientation at the edges. The code constructs the SVG, masks, and shapes programmatically via `document.createElementNS`, setting attributes like `fill`, `r`, and `mask` on each element. The layout adapts to the full viewport size using `window.innerWidth` and `window.innerHeight`.

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