SVG First

100%

✓ Published0🌍 Public

Last edited Jan 12, 2025

Created on Dec 29, 2024

A grid of horizontal and vertical black lines on a light gray canvas forms the entirety of this generative artwork, creating a simple, uniform mesh. The piece is a direct homage to Sol LeWitt executed in plain JavaScript using the Canvas `getContext('2d')` API. The code explicitly sets a stroke style and line width, then iterates in twenty-pixel increments to draw each line, procedurally constructing the visual from two loops without any external data or libraries.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric piece using only SVG and JavaScript, creating an intricate grid of horizontal and vertical lines. It shows a large circular mask revealing a woven pattern of alternating line directions, with the circle centered on a full-screen canvas. The code builds the visualization by constructing SVG elements via the DOM API (`document.createElementNS`), defining two masks (`circle-mask` and `circle-mask-2`) to clip horizontal and vertical line groups. It generates 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, with the masks controlling visibility to create the overlapping effect. No external libraries are used; the rendering relies purely on raw SVG and JavaScript.

IIndranil Biswas

81% match

Loading thumbnail…

Sol Lewitt in Vanilla JS Project Attempt #1

This example recreates a Sol Lewitt-inspired geometric drawing using nested, alternating black-and-white rectangles that shrink toward the center of an SVG canvas. The work is generated entirely with vanilla JavaScript, manipulating SVG elements through the Document Object Model (DOM) and the `createElementNS` API. It renders a grid of concentric rectangles with varying stroke widths and fill colors, producing a static, pattern-based composition. The code uses raw SVG string concatenation within a loop to build the shapes, with no external libraries or data sources involved.

CCasualWanderer20XX

81% match

Loading thumbnail…

Sol LeWitt Reproduction-VerticalLine

This example reproduces a Sol LeWitt art piece using an SVG canvas that fills the browser window. It shows a grid of one hundred thin vertical black lines, evenly spaced across the full height of the viewport. The code creates each line as an SVG `rect` element, setting its `x` position by multiplying an index by 19 pixels. The rendering relies solely on the native DOM API `document.createElementNS` for SVG, with no external visualization libraries.

XXuân Vinh

80% match

Loading thumbnail…

Sol LeWitt Reproduction Verticle

This example reproduces a Sol LeWitt-inspired drawing using only SVG elements. It shows a grid of horizontal and vertical lines confined to a circular mask, creating a clean, geometric composition. The visualization is generated procedurally with JavaScript, using the Document Object Model (DOM) APIs to create SVG nodes. A white circle on a black mask defines the visible area, while 100 horizontal rectangles and 100 vertical rectangles are drawn across the full canvas, with the horizontal set clipped by the mask. The code relies on native browser APIs such as `document.createElementNS` and `setAttribute`, with no external libraries.

PPrince Kumar

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

80% match

Loading thumbnail…

Sol LeWitt Reproduction - Vertical Lines

This example reproduces a Sol LeWitt drawing using JavaScript and the SVG API. It creates a full-screen SVG canvas and draws 100 vertical black rectangles, each 10 pixels wide and spaced 20 pixels apart, with no horizontal variation. The code uses `document.createElementNS` and `setAttribute` to generate the rectangles dynamically. The piece directly references LeWitt's instruction-based art, presenting a simple, systematic grid of vertical lines that fills the entire browser window, adapting to its dimensions.

Aajoua

80% match

Loading thumbnail…

Sol LeWitt Innovation

This piece renders a grid of thin horizontal and vertical lines on an SVG canvas. The horizontal lines are clipped by a circular mask, creating a visible disk at the center while the vertical lines remain unclipped across the full canvas. Built with the SVG API and JavaScript, the code creates 50 horizontal and 50 vertical rectangles, applying a `<mask>` with a circle to limit the visibility of the former. The masks and shapes are generated procedurally.

SSatyum Singh Pathania

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

80% match