Fork of SVG

100%

✓ Published1🌍 Public

Last edited May 14, 2023

Created on May 14, 2023

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.

AI-generated description

An apporoximation of Javascript visualization

MIT Licensed

Similar vizzes

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

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

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

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

80% match

Loading thumbnail…

Fork of Fork of SVG Creation

A black canvas displays a single, expanding spiral of sixty translucent, outlined polygons. The shapes grow larger and shift position with each iteration, while their stroke colors cycle through the HSL color space, creating a vibrant, dynamic gradient. The visualization is built with raw JavaScript using the `document.createElementNS` method to generate SVG polygon elements, and it relies on the D3 library only for the initial page setup via `d3.select`. The code explicitly sets `fill-opacity` to zero, making the polygons hollow outlines.

RRahulray12

79% match

Loading thumbnail…

Fork of Fork of SVG Creation

This example generates a geometric animation using raw SVG polygons, constructing 60 quadrilateral shapes that shrink and shift diagonally across the viewport. Each polygon’s vertices are calculated from a moving center point, with size and position modified by index-based formulas. The code uses the DOM `document.createElementNS` API to append SVG elements directly—no D3 library is imported—and applies a rainbow stroke color via HSL values that increment per shape. The page fills the entire browser window with a black background, rendering the hollow outlines without fill.

CChartat aGlance

79% match

Loading thumbnail…

Fork of SVG Fundamentals

A fork of the SVG Fundamentals example renders an empty, 960-by-500-pixel SVG canvas with no visible data or marks. The HTML sets up a full-screen viewport with the body margin removed and overflow hidden, while the inline script begins declaring an `svg` variable but does not assign it. No D3 or other visualization libraries are imported or invoked, leaving the page as a static, blank SVG placeholder. The example shows the initial scaffolding of an SVG-based visualization without any concrete rendering.

Llashaloladze

79% match