Shapes SVG Fundamentals

100%

Shapes SVG Fundamentals

✓ Published1🌍 Public

Last edited Jan 15, 2023

Created on Jan 15, 2023

This example demonstrates how to construct and populate an SVG scene programmatically using the raw SVG DOM API. It draws a series of 100 vertical, blue-stroked rectangles that span the full height of the viewport, spaced evenly across the window’s width. The code creates an SVG element via `document.createElementNS`, sets its dimensions to match the browser viewport, and then appends each rectangle with explicit `x`, `width`, `height`, `stroke`, and `fill` attributes. The rectangles use alternating black fills and blue outlines, creating a striped pattern across the page.

AI-generated description

This is SVG Test Linking Page.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational use of SVG to generate abstract geometric patterns programmatically. It creates a series of 100 vertical rectangles that span the full height of the viewport, with each rectangle positioned sequentially along the x-axis. The rendering approach relies on the raw Document Object Model (DOM) API, using `document.createElementNS` to construct SVG elements in the `http://www.w3.org/2000/svg` namespace. The code explicitly sets attributes like `x`, `width`, and `height` on each `<rect>` element, then appends them to an `<svg>` container sized to match the window dimensions. No external libraries are used; the example illustrates how plain JavaScript and SVG can produce visual compositions inspired by minimalist art.

KKresna Satya

84% match

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

81% match

Loading thumbnail…

new Shapes SVG Fundamentals

This example demonstrates how SVG masks can selectively reveal or hide overlapping grid lines. It renders horizontal and vertical stripes as SVG `rect` elements, each assigned a mask containing a black background and a white circle to create a transparent window. A second mask with inverted colors overlays the vertical stripes, producing a crosshatched pattern visible only within the circular region. The visualization is built using the raw `document.createElementNS` API to construct SVG elements dynamically in a loop, with the window size set to the full browser viewport.

Ssubratanp

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…

Shapes with SVG and CSS

This example demonstrates the use of raw SVG elements styled with CSS to create a simple composition of shapes. It shows circles and rectangles arranged in three groups, with the first group unstyled, the second using inline fill attributes, and the third inheriting blue fill and red stroke from a parent transform. The code directly constructs SVG circle, rect, line, and path elements within an HTML document, while a separate stylesheet applies stroke properties to elements with the class "lines". No data is loaded; the visualization relies entirely on declarative SVG markup and CSS rules.

VVinod-VIX

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the creation of a dynamic SVG visualization that adapts to the browser window’s dimensions. It generates 100 vertical rectangles, each 10 pixels wide, positioned incrementally along the x-axis using a JavaScript loop. The code uses the raw SVG DOM API via `document.createElementNS` to construct and style the rectangles with a skyblue fill, and it logs the computed viewport size to the console. The visualization showcases fundamental SVG shape rendering with programmable layout logic.

SShashi Kumar

80% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Iikimes

80% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—arranged in a 960×500 viewport with a global scale transform. It shows how inline SVG attributes like `fill`, `stroke`, and `stroke-width` control appearance, while CSS classes (`.lines`) style the line and path elements with custom stroke colors and line joins. The code uses raw SVG markup within an HTML document, applying a `transform="scale(1.5)"` to enlarge all shapes and a `translate` to offset a group of pink shapes. No external JavaScript libraries are employed; styling relies entirely on a linked stylesheet.

YYunLing

80% match