Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 12, 2023

Created on Mar 11, 2023

This example demonstrates a grid of two SVG rectangles, each 50 by 50 pixels, with a black stroke and no fill, rendered in a 500 by 500 SVG container. It shows how to use a Tile builder pattern with a Tile class to programmatically create SVG `<rect>` elements via the DOM API `document.createElementNS`. The script also directly manipulates the second rectangle’s fill to black, and includes a button labeled “double,” though no click handler is defined. The rendering approach is pure SVG with no external libraries.

AI-generated description

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

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

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

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

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

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

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal static composition rendered as SVG, consisting of two overlapping rectangles—a larger yellow rectangle beneath a smaller red one. The page uses plain HTML with embedded CSS and JavaScript, with no external libraries or data sources. The SVG element is sized at 500 by 500 pixels with a viewBox of 0 0 100 100, allowing the shapes to be defined in a normalized coordinate space. The code directly specifies each rectangle's position and fill color, showing a basic approach to creating vector graphics without additional tooling.

FFernando Sosa

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

81% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple static composition of SVG shapes, including two outlined circles and two filled rectangles, arranged on a 500 by 500 canvas. The geometric figures are defined directly in the HTML markup, with styling applied through a CSS rule for a message class, though no text is rendered. The visualization uses inline SVG elements within an HTML page, and the circles are styled with a black stroke and no fill, while the rectangles appear with default black fills. No JavaScript libraries or interactive features are present; the code relies purely on native SVG and CSS.

FFaridah Namutebi

81% match