Sol LeWitt in vanilla js

100%

Sol LeWitt in vanilla js

✓ Published1🌍 Public

Last edited Apr 19, 2023

Created on Apr 19, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT wall drawing as an interactive SVG visualization. The page renders a 960-by-500 SVG canvas and uses plain CSS and JavaScript, with React as the framework, to generate geometric shapes. The drawing consists of vertical and horizontal lines in a grid pattern, executed in black and white. The code includes a minimal HTML wrapper and a script that logs to the console, but the core geometry is defined through the SVG elements. The rendering relies on React’s component structure and SVG’s native shape primitives to compose the artwork.

BBenLeathers

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

87% match

Loading thumbnail…

Sol LeVitt

A red circle with horizontal white stripes and vertical white stripes creates a grid-like pattern, demonstrating a minimalist geometric composition. The artwork uses inline SVG elements within an HTML page, including a circle filled with red and rectangles filled with white to form the stripes. The SVG canvas is fixed at 400 by 400 pixels, with the circle positioned accordingly. This example showcases how basic SVG shapes can be combined to recreate the visual style of Sol LeWitt's wall drawings, using only HTML and CSS with no JavaScript.

MmyN3RD

86% match

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt wall drawing using purely geometric forms: a series of vertical rectangles evenly spaced across the full browser window. It renders 100 thin, black bars, each 10 pixels wide and as tall as the viewport, using raw SVG elements created and appended via the Document Object Model (DOM) API. The code does not use any D3 functions or libraries, instead relying on native JavaScript to set the width, height, and position of each rectangle. The piece emphasizes minimal, systematic repetition, echoing LeWitt’s instructional art, with the final output being a static, monochrome composition.

MMatheesha Yapa

86% match

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

86% match

Loading thumbnail…

Sol LeWitt Reproduction

An SVG reproduces Sol LeWitt’s geometric wall drawing using a blank 960×500 canvas, with no visible data or interactive elements. The page relies on a linked stylesheet for layout, while the empty `<svg>` element suggests the artwork is either missing or rendered entirely through JavaScript or external assets not present in the HTML. The example demonstrates a minimal static SVG structure, with the code naming no specific visualization libraries or APIs, and shows no explicit data source or rendering logic beyond the raw markup.

Sshaan4jacobs

86% match

Loading thumbnail…

Sol LeWitt Reproduction

This example generates a graphical composition inspired by Sol LeWitt’s wall drawings. An empty SVG canvas of 960 by 500 pixels is set up, and the page uses a simple HTML structure with a JavaScript console message. The visualization relies on the SVG API for its rendering, as defined in the `index.html` file, and uses the framework React, although no drawing logic is visibly implemented in the provided code. It is a minimal starter that references a React starter template for further development.

FFiona0229

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

85% match