lines

100%

✓ Published1🌍 Public

Last edited Nov 17, 2022

Created on Nov 17, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

horizontal 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.

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

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

81% match

Loading thumbnail…

Lines

A React application renders an SVG scene of red and black lines, with three diagonal black lines crossing vertical red strokes against a plain background. The example demonstrates basic SVG shapes within a React component, using `<line>` elements positioned via coordinate arrays. The SVG canvas is 960 by 500 pixels, and the styling applies thick stroke widths to both line types and paths. The code maps over hardcoded x-coordinates to generate the line elements, though the current implementation contains an undefined variable reference that would prevent successful rendering. The visualization highlights simple geometric composition using React’s declarative rendering approach with SVG.

NNita

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

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…

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…

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

79% match