Skip to main content
SimilarExport ZIP
100%

SVG fundamentals

✓ Published1🌍 Public
Sslyfer-cell
Last edited Jun 4, 2022
Created on May 23, 2022
Forked from HTML Starter

This example demonstrates the fundamental building blocks of SVG by constructing a single rectangle using raw DOM manipulation. The code programmatically creates an SVG element and a rect child node via the `document.createElementNS` API, setting explicit width and height attributes of 960 by 500 pixels for the canvas and 100 by 100 for the shape. It shows how to manually build SVG graphics without any visualization library, relying solely on native browser methods and CSS styling for the page layout. The rectangle is appended directly to the body, illustrating the basic SVG creation workflow.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
88% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG graphics, showing how to construct and render basic shapes such as rectangles, circles, and lines within an HTML page. The visualization uses raw SVG elements defined directly in the markup, without any external libraries or JavaScript, relying solely on the browser's native rendering capabilities. The code presents a bare-bones structure with an empty body, leaving the SVG content to be added by the user, and references a React Starter template for comparison, though the current implementation remains purely static HTML.

Ccharlesjou
88% match
Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes and attributes, including rectangles, circles, lines, and paths, arranged on a 2000-by-2000 canvas. It shows how to control fill, stroke color, stroke width, and positioning through inline SVG elements. The code uses raw SVG syntax within an HTML page, with no external libraries or frameworks. The shapes are rendered directly by the browser's SVG engine, illustrating basic vector graphics construction without any data binding or interactivity.

Ccapcharmander
87% 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
87% 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
87% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational shapes used in SVG graphics, including a circle, a rectangle, and a line rendered within a 900 by 500 canvas. It showcases how CSS styling controls the presentation of a message, while inline SVG attributes define the geometry and appearance of each shape, such as the rectangle’s red fill and black stroke. The code uses raw SVG elements in an HTML page with embedded JavaScript and CSS, serving as a minimal starter for understanding vector graphics without external libraries.

Eednut
87% match
Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG shapes and rendering using raw SVG markup in an HTML page. It shows primitive geometric elements including circles, a rectangle, and a path, with varied presentations like colored fills, strokes, and stroke widths. The code uses no external libraries or frameworks, relying purely on SVG’s native elements (`<circle>`, `<rect>`, `<path>`) and CSS attributes. The fixed 960x500 viewport and hardcoded coordinates in the markup demonstrate a static, hand-coded approach to constructing vector graphics without data binding or interactivity.

Kkosakase
87% match
Loading thumbnail…

SVG fundamentals

This example demonstrates the foundational building blocks of SVG, showing how basic shapes, text, and styling come together in a simple web page. It uses raw HTML and CSS within an empty `<body>` element, with no JavaScript or charting library, relying entirely on the browser's native SVG rendering capabilities. The visualization serves as a minimal starting point for understanding SVG syntax before moving on to complex frameworks.

Nnicosans
87% match