mySVGwork

100%

✓ Published1🌍 Public

Last edited Dec 9, 2023

Created on Dec 9, 2023

This example displays a full-screen SVG canvas filled with one hundred vertical rectangles, each ten pixels wide and spaced twenty pixels apart. The code generates the graphic dynamically using the Document API's `createElementNS` method to construct SVG elements. The rectangles span the entire height of the browser window, creating a striped pattern that responds to the current viewport dimensions. The rendering approach uses a simple loop to position each shape incrementally across the horizontal axis.

AI-generated description

A bare minimum HTML page this is the beginning of the SOL Lewitt variable and drawings.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example introduces fundamental SVG rendering by generating a grid of 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, across the full browser window height. The code uses native DOM manipulation with `document.createElementNS` and the `http://www.w3.org/2000/svg` namespace to construct the SVG elements dynamically in a loop. It also demonstrates viewport sizing via `window.innerWidth` and `window.innerHeight`, with CSS applied globally to remove margins and hide overflow.

DDonald Bagwell

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational use of SVG to generate abstract geometric patterns programmatically. It creates a series of 100 vertical rectangles that span the full height of the viewport, with each rectangle positioned sequentially along the x-axis. The rendering approach relies on the raw Document Object Model (DOM) API, using `document.createElementNS` to construct SVG elements in the `http://www.w3.org/2000/svg` namespace. The code explicitly sets attributes like `x`, `width`, and `height` on each `<rect>` element, then appends them to an `<svg>` container sized to match the window dimensions. No external libraries are used; the example illustrates how plain JavaScript and SVG can produce visual compositions inspired by minimalist art.

KKresna Satya

82% match

Loading thumbnail…

Patterns

This example generates a full-screen abstract composition of 100 thin vertical rectangles. It uses the SVG namespace to create each rect element directly via JavaScript, setting the x position to increment by 20 pixels and giving each a fixed width of 10 pixels and a height equal to the window height. The visualization relies on `document.createElementNS` and `svg.appendChild` to build the pattern dynamically, without any external libraries.

Gguts

81% match

Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG rendering by generating a grid of vertical rectangles that stretch across the full height of the browser window. The code creates 100 rectangle elements using the Document Object Model’s `createElementNS` method with the SVG namespace, setting each rectangle’s x-coordinate and width via attributes. It leverages vanilla JavaScript to dynamically append these shapes to an SVG container that is sized to match the viewport using `window.innerWidth` and `window.innerHeight`. The result is a simple, repeating pattern that demonstrates basic SVG shape creation without external libraries.

SSidney Oluoch

80% match

Loading thumbnail…

Lecture 3

This example demonstrates a full-screen SVG visualization of 100 vertical rectangles, each with a fixed width of 10 pixels and spacing of 20 pixels, filling the entire viewport height. It uses the Document Object Model API’s `createElementNS` method to construct SVG elements—specifically the `<svg>` and `<rect>` tags—within the `http://www.w3.org/2000/svg` namespace. The rectangles are generated in a JavaScript loop, with their `x` positions advancing by 20 pixels per iteration, creating a striped pattern across the window. The code sets the SVG’s width and height to the browser’s inner dimensions, ensuring the visualization scales responsively.

Jjajinkyaa

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the creation of a dynamic SVG visualization that adapts to the browser window’s dimensions. It generates 100 vertical rectangles, each 10 pixels wide, positioned incrementally along the x-axis using a JavaScript loop. The code uses the raw SVG DOM API via `document.createElementNS` to construct and style the rectangles with a skyblue fill, and it logs the computed viewport size to the console. The visualization showcases fundamental SVG shape rendering with programmable layout logic.

SShashi Kumar

80% match

Loading thumbnail…

javascript svg

This example generates a full-screen SVG visualization using the browser’s native Document Object Model (DOM) APIs. It creates 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the window. The rectangles are appended to an SVG element created via `document.createElementNS`, with dimensions set from `window.innerWidth` and `window.innerHeight`. The code runs directly in an HTML page with no external libraries, demonstrating a simple programmatic approach to SVG rendering in a React-hosted environment.

CCosmosDude1

79% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example displays a full-window SVG visualization of vertical black bars, creating an abstract, striped pattern that fills the viewport. It uses the raw Document Object Model (DOM) API, specifically `document.createElementNS` with the SVG namespace, to dynamically generate rectangles. The code calculates bar size and count based on window dimensions, then appends each `rect` element to the SVG root, which is itself appended to the body. No external libraries are used; the rendering is entirely driven by native JavaScript and SVG.

Ccaitlin-woods

79% match