Skip to main content
SimilarExport ZIP
100%

Fork of Exercise 1: SVG Fundamentals

✓ Published1🌍 Public
Ccaitlin-woods
Last edited Oct 3, 2021
Created on Oct 3, 2021

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.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG

A fork of SVG renders a full-screen canvas of one hundred vertical black bars. The visualization shows a rigid, rhythmic grid that fills the viewport, created entirely through the Document Object Model (DOM) and the SVG `rect` element. The script uses JavaScript’s `document.createElementNS` with the SVG namespace to dynamically generate each rectangle, setting its `x` position, fixed `width`, and `height` equal to the window’s height. The bars are placed sequentially every twenty pixels, resulting in a stark, minimalist composition that directly reflects the numeric loop in the code.

KKhanin Sisaengsuwanchai
82% match
Loading thumbnail…

Fork of SVG Fundamentals - Sol LeWitt repro follow-along

This example reproduces a Sol LeWitt art piece using dynamically generated SVG rectangles. The code creates 100 vertical black bars, each 10 pixels wide, evenly spaced across the full window height, filling the browser viewport. It uses the Document API (`createElementNS`) to build SVG elements from scratch within JavaScript rather than a dedicated visualization library. The rendering approach directly mirrors LeWitt’s geometric, minimalist style by iterating through a fixed count of shapes.

MMichael Gomersall
81% 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
80% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates how to build an interactive SVG scene using the Document Object Model (DOM) and the SVG namespace. It creates a full-window SVG element populated with a mask and a vertical rectangle, using methods like `createElementNS` and `setAttribute`. The code prepares a loop for generating 100 elements but currently leaves it empty, showing foundational SVG construction in raw JavaScript without external libraries. The visualization illustrates basic SVG structure, viewport sizing, and programmatic element creation for future graphics.

AAleOG
80% 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
79% 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
79% match
Loading thumbnail…

mySVGwork

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.

DDonald Bagwell
79% match
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
79% match