My thing

100%

✓ Published0🌍 Public

Last edited Nov 5, 2023

Created on Nov 4, 2023

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.

MIT Licensed

Similar vizzes

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

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

78% match

Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG by creating and manipulating vector graphics directly through the DOM. The code uses the `document.createElementNS` API to construct SVG elements programmatically in plain JavaScript, with no external libraries. It renders a simple visualization from scratch, showing how basic shapes and attributes are defined and assembled within an HTML page that loads a single `scripts.js` file. The approach highlights the raw SVG syntax and DOM manipulation techniques that form the foundation for more complex data-driven visualizations.

MMarc Brüssel

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates raw SVG shape drawing within a web page. It shows a blue circle, a second black circle, and a thick navy diagonal line rendered on a 960 by 500 canvas. The code uses the standard SVG elements `circle` and `line`, defining their positions with `cx`, `cy`, `r`, `x1`, `y1`, `x2`, and `y2` attributes. Colors and stroke width are set directly via the `fill`, `stroke`, and `stroke-width` presentation attributes, with no external data or scripting involved.

IIlyas Filali

77% match

Loading thumbnail…

SVG Principio

This example demonstrates a basic SVG scene composed of three circles positioned horizontally, with the first circle using the default black fill and the other two explicitly colored blue and green. A thin blue rectangular outline frames the entire drawing area, while an incomplete line element with an empty x1 attribute suggests an unfinished or minimal structure. The code uses raw SVG markup within an HTML document, relying on standard SVG circle, rect, and line elements. The rendering approach is purely declarative, with no JavaScript libraries or data sources involved.

DDRDoom201

77% match

Loading thumbnail…

SVG fundamentals, baby

This example demonstrates the foundational steps of creating and styling SVG elements using plain JavaScript. It creates an SVG container that fills the entire browser window using the `document.createElementNS` API with the SVG namespace. The code then appends a rectangle with a fixed width of 100 pixels and height of 50 pixels, filling it with black via the `setAttribute` method. The example relies entirely on native browser APIs—no external libraries such as D3 or React—though the metadata notes the framework as React, which is not used in the visible code.

Ddsims2157

76% match

Loading thumbnail…

JS Example

A JavaScript-generated SVG visualization displays a series of vertical blue rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full window height. A circular mask, centered on the screen with a radius of 200 pixels, reveals only the bars within its boundary, creating a striking circular cutout effect against the otherwise full-height stripes. The code builds the SVG dynamically using the DOM API, creating elements via `createElementNS` and appending them to the body with attributes set programmatically.

Nnubhatia

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

76% match