Skip to main content
SimilarExport ZIP
100%

SVG fundamental

✓ Published1🌍 Public
NNafi
Last edited Jul 5, 2022
Created on Jul 4, 2022
Forked from HTML Starter

This example shows four black horizontal bars of decreasing width labeled A through D, creating a simple data-encoding visualization. The bars are drawn as SVG `<rect>` elements with fixed pixel dimensions, while the labels use SVG `<text>` elements. The page relies on plain HTML, CSS for styling (including font size and margin reset), and JavaScript is referenced though not directly used in the visible code. Rendering is handled entirely through inline SVG within the `index.html` file, demonstrating fundamental SVG shape and text placement without external libraries or data sources.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Svg Fundamentals 1

A minimalist SVG composition displays four horizontal bars of varying lengths against a white canvas, labeled A through D along the left margin. Each black rectangle rotates 90 degrees around its starting point, creating a stepped visual hierarchy. The example uses only raw SVG elements—`rect`, `text`, and `transform` attributes—with no external libraries. The bars and labels are rendered directly in the SVG namespace, styled with the Share Tech font loaded via Google Fonts, demonstrating fundamental vector shape positioning and rotation techniques.

Ppawelsapiecha
87% match
Loading thumbnail…

SVG Fundamentals

A minimalist SVG composition demonstrates basic shape primitives and text labeling. Four black rectangles of varying widths and heights are arranged in a stepped layout against a white background, with the letters A through D positioned vertically along the left margin. The example uses raw SVG elements—`rect`, `path`, and `text`—rendered directly in HTML, with styling applied via the Fira Sans font family. No JavaScript libraries or data sources are involved; the visualization serves purely as a static reference for SVG structure and coordinate placement.

RRifat Shadman
86% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and text elements as a static bar chart-like visualization. The code uses the raw SVG API with `circle`, `rect`, and `text` tags to render four labeled rectangles of decreasing widths. The JavaScript-free page relies on hardcoded pixel coordinates and fill colors with no data binding or interaction. It serves as a minimal introduction to SVG’s coordinate system and shape primitives within a React-free HTML context.

KKaan
83% match
Loading thumbnail…

Fork of HTML Starter

This example shows four horizontal bars labeled A through D, each with equal length, rendered as black rectangles with white fill and a thick black stroke on the first bar. The visualization uses raw SVG elements defined directly in HTML, with CSS styling controlling the font family 'Share Tech' and the bar’s stroke properties. JavaScript is not used; the chart is static, relying on inline SVG `rect` and `text` tags within a 960x600 viewport.

Bbillzhou2005
83% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—rectangles, text elements, and a polyline path—arranged to form a simple horizontal bar chart with category labels A through D. The SVG markup uses inline styling and CSS classes to control fill colors, stroke widths, and font properties, with a Google Fonts import for the Protest Riot typeface. The chart displays varying bar lengths on a 960×500 canvas, mixing red, black, and white fills with rounded stroke caps on a connected path line.

Jjwu534@gmail.com
82% match
Loading thumbnail…

SVG Fundementals

This example shows a minimalist bar chart created with five black rectangles of varying heights and positions on a white background, representing abstract data values across a 960-by-500 viewBox. It renders directly in SVG elements defined inline within the HTML, using the `rect` tag with explicit `x`, `y`, `width`, and `height` attributes. The code relies on basic CSS to remove page margins and set overflow to hidden, with no JavaScript libraries or external data sources involved.

11512978kamps@zuyd.nl
82% match
Loading thumbnail…

SVG Example

This example demonstrates the fundamental structure of SVG graphics with five colored rectangles arranged to form a pseudo-bar chart. The rectangles decrease in height from left to right, with each bar positioned at a different vertical offset. The visualization uses raw SVG elements—specifically `<svg>` and `<rect>` tags—embedded directly in an HTML document, with hard-coded width, height, and position attributes. No JavaScript libraries or data sources are involved, showcasing SVG's native capability for static vector rendering.

CCurran Kelleher
82% match
Loading thumbnail…

SVG Fondamentals

This example demonstrates fundamental SVG shapes, including lines, rectangles, circles, and paths, to construct a basic bar chart with labeled X and Y axes. The chart uses three colored bars of varying heights, while additional shapes, such as a yellow rectangle with a blue stroke and a filled polygon, showcase different styling options. The code directly embeds SVG markup in HTML, specifying attributes like `width`, `height`, `fill`, and `stroke`. A text element displays the phrase "Mon Texte SVG," illustrating text rendering capabilities. No external libraries are used, relying solely on native SVG syntax within an HTML document.

Aadrien225
82% match