Fork of HTML Starter J

100%

Fork of HTML Starter J

• Draft1🔗 Unlisted

Last edited May 1, 2026

Created on May 1, 2026

This example generates a simple SVG scene of 100 vertical rectangles using the SVG `rect` element. Each rectangle is placed at a fixed horizontal interval of 20 pixels and spans the full 500-pixel height. The code creates a scalable vector graphic with a width of 960 by 500 pixels, using the Document.createElementNS method to construct SVG nodes. The visualization demonstrates programmatic shape generation without any data source or user interaction.

AI-generated description

A demonstration of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example generates a grid of 100 thin vertical rectangles on an SVG canvas using JavaScript’s `document.createElementNS` API. Each rectangle is positioned at increasing x-coordinates with a fixed width and full height, creating a striped pattern across the 960-by-500 pixel viewport. The code uses native Document Object Model (DOM) methods to build the SVG element and its children, with no external libraries or data sources. It demonstrates fundamental SVG creation and attribute manipulation in a bare HTML page.

Sscxingji

86% match

Loading thumbnail…

Fork of HTML Starter

This example creates a full-window SVG scene using native JavaScript and the DOM API, without any external libraries. It draws 100 horizontal and 100 vertical rectangles to form a grid, with horizontal bars partially obscured by an SVG mask that reveals a central circle. The mask combines a black background rect with a white 200-radius circle at the center, so only the bars inside that circle are visible. The rendering approach relies on `document.createElementNS` to build SVG elements and `setAttribute` for dynamic sizing based on `window.innerWidth` and `window.innerHeight`.

Llt_vandegrift@live.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

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

83% match

Loading thumbnail…

Fork of SVG Fundamentals

This example generates a full-screen abstract composition by dynamically creating an SVG scene using the DOM API. It shows one hundred vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the viewport width, extending the full window height. The code uses the raw `document.createElementNS` method to build SVG `rect` elements without any external libraries, setting the SVG dimensions to the browser's `innerWidth` and `innerHeight`. The script then appends each rectangle sequentially, producing a rhythmic grid of uninterrupted lines.

Eeric.r.thornhill@gmail.com

83% match

Loading thumbnail…

Fork of HTML Starter

This example is a fork of the HTML starter, presenting a static SVG composition of overlapping rectangles, circles, lines, and text. It demonstrates the raw use of SVG elements alongside inline CSS and JavaScript within a single HTML file. The visualization is rendered entirely through SVG, with shapes defined by fixed coordinates and attributes, and the text element displays a message about the author's affinity for the format. It serves as a minimal, hand-coded illustration of SVG’s vector graphics capabilities without any external libraries or data.

Aamp1enator@gmail.com

83% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes—a rectangle, circle, line, and text—arranged within a 300 by 150-pixel viewport. It shows how basic geometric primitives combine with styling attributes like fill, stroke, and stroke-width to create a simple composition. The code uses inline SVG elements directly in an HTML page, styled with CSS for font and layout, and loads the Share Tech font from Google Fonts. The rendering is static SVG, illustrating core vector graphics concepts without external JavaScript libraries.

JJing Li

83% match