horizontal lines

100%

horizontal lines

✓ Published1🌍 Public

Last edited Nov 17, 2022

Created on Nov 17, 2022

Forked from lines

This example displays a full-screen SVG filled with 100 evenly spaced horizontal gray lines. Each line is a separate `<rect>` element, generated programmatically in a loop, with a width matching the viewport and a height of 10 pixels. The rectangles are spaced 20 pixels apart vertically, using a plain JavaScript approach with `document.createElementNS` and `setAttribute`. The visualization demonstrates a simple, static grid pattern that adapts to the browser window’s width and height. No external libraries or frameworks are used; it relies solely on native DOM and SVG APIs.

AI-generated description

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

Similar vizzes

Loading thumbnail…

lines

This example fills the browser window with 100 horizontal lines, each a thin SVG rectangle stacked at 20-pixel intervals. It demonstrates minimal procedural rendering using the Document Object Model API to create SVG elements (`document.createElementNS`) and set attributes like `width`, `height`, and `y`. The lines span the full viewport width, derived from `window.innerWidth/Height`, with no interaction or animation, showing a static grid-like pattern.

AAkshay

88% match

Loading thumbnail…

svg lines

This visualization displays a series of vertical rectangles across the full viewport, creating a pattern resembling spaced lines. The page generates 100 SVG rectangles, each 10 pixels wide and spaced 20 pixels apart, using raw DOM manipulation via `document.createElementNS` to construct the SVG elements. The rectangles span the full height of the window, which is dynamically set using `window.innerWidth` and `window.innerHeight`. The code relies on standard web APIs for SVG creation and attribute setting, with no external libraries or data sources involved.

TTehran Mammadov

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

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…

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

80% match

Loading thumbnail…

sol vanilla JS

This example uses SVG and JavaScript to create a circular viewport that reveals a grid of horizontal and vertical lines. The visualization dynamically builds SVG elements, using masks to carve a circular hole in the background and to clip the vertical stripes inside the circle. The code creates a mask for the horizontal lines, which span the entire window width, and a second mask for the vertical lines, which fill the circle’s height. The result is an optical illusion of intersecting lines, produced entirely with procedural DOM manipulation and CSS styling.

KKerim

80% match

Loading thumbnail…

Sol LeWitt lineas verticales

This example generates a static, full-window SVG visualization of vertical lines, inspired by Sol LeWitt's minimalist wall drawings. It shows one hundred narrow rectangles arranged evenly across the screen, each with a fixed width and height matching the viewport, creating a rhythmic pattern of alternating line and gap. The code uses the plain Document API with `createElementNS` and `appendChild` to construct SVG `<rect>` elements dynamically in a loop. The dimensions derive from `window.innerWidth` and `window.innerHeight`, and the styling comes from a linked stylesheet, though no external rendering library is used.

SSergio

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