Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Aug 6, 2025

Created on Aug 6, 2025

This example draws a generative art piece inspired by Sol LeWitt, rendering a grid of vertical bars across the full browser window. Using raw SVG manipulation via the DOM API, the script creates 100 rectangle elements, each 10 pixels wide and 500 pixels tall, spaced 20 pixels apart along the x-axis. The rectangles are appended to an SVG canvas that stretches to the viewport’s dimensions, producing a minimalist, repeating pattern without any interaction or animation. The result is a static, rule-based composition generated entirely in JavaScript.

AI-generated description

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

Fork of Fork of JS and d3

This example is a simple reproduction of a Sol LeWitt-inspired drawing, created with plain JavaScript and the SVG DOM API. It renders 100 vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across a 960 by 500 pixel canvas, filling the viewport without margins. The code directly manipulates SVG elements via `document.createElementNS` and `setAttribute`, demonstrating a minimal, non-D3 approach to generative art. The static composition highlights the geometric repetition characteristic of LeWitt’s wall drawings.

Ppiekarczvk@gmail.com

85% match

Loading thumbnail…

Fork of HTML Starter

This example shows a full-screen SVG canvas generated entirely with vanilla JavaScript, without any external libraries. It creates 100 vertical rectangles, each 10 pixels wide, positioned at 20-pixel intervals across the viewport width. The code uses the Document Object Model (DOM) API methods `createElementNS`, `setAttribute`, and `appendChild` to build the SVG elements dynamically. The rectangles stretch to the full height of the window, producing a simple striped pattern that reacts to the browser’s current dimensions at load time.

SShannon Teoh

84% match

Loading thumbnail…

Fork of HTML Starter

This example displays a series of thin horizontal rectangles that collectively span the full width of the browser window, using a minimal design that emphasizes simplicity. The SVG canvas is dynamically sized to match the viewport dimensions. The visualization is built with D3.js, leveraging the `select`, `append`, `range`, and `join` APIs to generate and position each rectangle vertically, with a fixed height of 10 units. The data is synthetic, derived from a numeric range of 100 values, resulting in a clean, unadorned grid-like pattern rendered directly in the browser.

Jjazmorguzdev

84% match

Loading thumbnail…

Fork of HTML Starter

This example renders a full-screen SVG canvas using raw JavaScript and the SVG DOM API, drawing a series of 100 vertical rectangles. Each rectangle is placed at increasing x-coordinates, with a fixed width and a height set to the window’s inner width, creating a striped pattern across the viewport. The code programmatically creates SVG elements via `document.createElementNS` and appends them to the document, demonstrating a minimal HTML/CSS/JavaScript setup without external libraries.

CChirag

84% match

Loading thumbnail…

Fork of Fork of SVG Fundamentals

This example reproduces a Sol LeWitt–style drawing by generating vertical black bars across the full browser viewport. The code creates an SVG element sized to the window’s inner dimensions and appends a series of `<rect>` elements spaced 20 pixels apart, each 10 pixels wide and as tall as the window. It uses the JavaScript DOM API (`createElementNS`, `setAttribute`, `appendChild`) to build the SVG programmatically. The resulting composition is a minimalist grid of alternating stripes, driven entirely by the current window size.

SSimon Krukowski

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

84% match

Loading thumbnail…

Fork of solLewitt

This example shows a generative, full-screen SVG composition of vertical rectangles. The visualization fills the browser viewport with 100 evenly spaced bars, each 10 pixels wide, that stretch from the top to the bottom of the window. The code uses the JavaScript DOM API to create SVG elements via `document.createElementNS` and sets the `width` and `height` attributes of the container based on the window's `innerWidth` and `innerHeight`. Each rectangle’s `x` position is calculated mathematically as a multiple of 20 pixels, producing a regular, rhythmic pattern. This is a straightforward reproduction of a Sol LeWitt-inspired drawing, relying solely on native SVG and no external libraries.

Mmartina.dallamico.1@studenti.unipd.it

84% match