Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
SShannon Teoh
Last edited Apr 28, 2024
Created on Apr 28, 2024
Forked from 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
95% match
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
92% 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
90% match
Loading thumbnail…

Fork of HTML Starter

This example uses raw JavaScript and the SVG API to dynamically construct a full-window visualization. It creates two distinct masks on an SVG canvas: a white circle on a transparent background and a white rectangle with a black circular hole at the center. The code then generates 100 horizontal and 100 vertical thin rectangles, applying these masks to reveal a grid-like pattern of intersecting lines against a plain background. The result is a geometric composition built entirely through procedural DOM manipulation without any external libraries.

SSGPPellow
89% match
Loading thumbnail…

Fork of HTML

This visualization displays a full-screen SVG canvas filled with one hundred horizontal stripes, each ten pixels tall, spanning the entire width of the viewport. The code creates an SVG element using the raw DOM API `document.createElementNS`, dynamically sizing it to the browser window’s inner dimensions. It then generates rectangles via a JavaScript loop, setting their `y` position incrementally and applying fixed height and width attributes. No external libraries are used; the rendering relies entirely on standard SVG and browser JavaScript.

GGuna
89% match
Loading thumbnail…

Fork of HTML Starter

This example shows a blank browser window with a single small black square rendered in the upper-left corner of an SVG canvas. The code creates an SVG element with a width of 950 pixels and a height of 500 pixels using the native Document Object Model API `document.createElementNS`, then appends a rectangle with both width and height set to 100 pixels. No data source is involved; the visualization is purely a static demonstration of programmatic SVG construction using vanilla JavaScript without any external libraries. The render approach relies directly on browser-native SVG namespace methods.

OOmid Golshan
88% match
Loading thumbnail…

Fork of HTML Starter

This example displays a blank SVG canvas with the text "HTML Starter" styled at a large font size. The page uses vanilla HTML and CSS, with a small JavaScript snippet that creates a new SVG element and appends it to the document body, though this results in showing only the styled message. The SVG’s defined width and height of 960 by 500 pixels are visible in the markup, but no data or additional visualizations are rendered. It serves as a minimal starter template for web-based graphics.

SShannon Teoh
88% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a full-screen SVG visualization composed of 100 horizontal rectangles, each 10 pixels tall. The rectangles are rendered as uniform stripes that collectively fill the entire browser viewport. The visualization applies a circular mask to every rectangle, creating a repeating pattern of clipped shapes. The code uses D3 v6's `d3.select` and `.join` APIs to efficiently bind array data to SVG elements, with `d3.range(n)` generating the sequence of y-positions.

IIvan Sergio Lopez
88% match