Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

My thing

Public visualization

Viewing a saved revision (read-only)

7bdc6fd9ccea480bb7c965ad20fb7cb4

My thing

0 stars0🌍 Public
Ccniekel
Last edited Nov 5, 2023
Created on Nov 4, 2023
Forked from SVG Fundamentals

This example demonstrates how SVG elements are constructed and layered directly in the browser using the Document Object Model (DOM) and the `createElementNS` API. It shows a series of vertical black lines evenly spaced across the viewport, followed by a single blue rectangle that fills the entire screen, obscuring the lines beneath it. The rendering approach relies on manual SVG creation via `document.createElementNS`, setting attributes for line coordinates and rectangle dimensions, and appending nodes to the document body. No external libraries are used; the code runs on raw JavaScript and SVG.

AI-generated description

A demonstration of SVG shapes.