Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Sscxingji
Last edited Jun 9, 2023
Created on Jun 9, 2023
Forked from 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.

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
91% match
Loading thumbnail…

Fork of HTML Starter

This example renders a static SVG grid of thin vertical and horizontal lines across the full browser window, creating a Cartesian coordinate system. The code uses raw DOM manipulation with `document.createElementNS` to append individual `rect` elements to an SVG, along with helper functions `grid`, `printPattern`, and `printDiag` that position blue filled cells. It demonstrates generating geometric shapes, including diagonal lines, by placing 10-pixel squares at calculated grid intersections. No external libraries are used; the visualization relies solely on vanilla JavaScript to build the SVG structure.

SShiwam Tiwari
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
87% 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
86% match
Loading thumbnail…

Fork of HTML Starter

This example creates an SVG mask that reveals horizontal stripes through a circular window. The code generates 100 horizontal rectangles, each masked by a circle centered on the screen, while 100 vertical rectangles overlay the full canvas without masking. All shapes are built dynamically using the SVG namespace with `document.createElementNS`, and the mask is defined with a black background rect and white circle to control visibility. The result is a simple geometric pattern combining masked and unmasked grid-like elements.

EErik L
86% 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
86% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a series of black rectangles of varying heights and widths arranged on a white 960×500 SVG canvas, creating an abstract geometric composition. The rectangles are positioned at different coordinates, with some overlapping in their vertical extents. The visualization uses raw SVG elements defined directly in the HTML markup, including `<svg>`, `<rect>`, and inline styles for sizing and placement. No JavaScript libraries or data processing are involved; the rendering relies solely on static SVG attributes such as `x`, `y`, `width`, and `height` to define the layout.

LLucia Cerchie
85% 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
85% match