Skip to main content
SimilarExport ZIP
100%

SVG Fandamental_AW

✓ Published1🌍 Public
AAwrng
Last edited Sep 1, 2026
Created on Jul 21, 2026
Forked from HTML Starter

This example demonstrates fundamental SVG shapes and a simple pie chart showing gaming genre distribution. It displays colored circles, rectangles with strokes, and polygons forming a rocket illustration, alongside a pie chart breaking down data into FPS, Casual, and RPG genres. The visualization uses raw SVG elements including `<circle>`, `<rect>`, `<polygon>`, and `<path>` with arc commands to construct the pie slices. Labels are connected using `<line>` and `<text>` elements, with all shapes explicitly positioned and colored through SVG attributes.

AI-generated description

a demonstarion of SVG shapes

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of new SVG Fandamental_AW

This example demonstrates three separate SVG-based visualizations within a single HTML document, beginning with basic shapes like circles and rectangles, followed by a rocket illustration composed of polygons, and concluding with a pie chart showing gaming genre distribution. The pie chart uses SVG path elements with arc commands to create three segments for FPS, Casual, and RPG genres, accompanied by labels and a legend. The code leverages native SVG APIs, including `<circle>`, `<rect>`, `<polygon>`, `<path>`, and `<text>` elements, with inline styling for colors and strokes, and includes a separate stylesheet for additional text formatting.

AAwrng
93% match
Loading thumbnail…

new SVG Fandamental_AW

This example demonstrates fundamental SVG shape creation and styling through hand-coded markup, featuring colored circles, rectangles with strokes, and a stylized rocket built from polygons. The code also includes a pie chart showing gaming genre distribution, constructed with SVG path arcs and accompanied by labeled lines and a legend. All elements are rendered directly in the browser using native SVG APIs without additional libraries, with basic styling provided through external CSS and JavaScript logging a simple console message. The visualization highlights basic geometric composition and data representation through vector graphics.

AAwrng
92% 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
76% match
Loading thumbnail…

SVG Fundamental

This example demonstrates a set of basic SVG shapes—circles and a line—arranged to show fundamental geometric primitives. It presents three circle variations, including a solid black circle, a two-tone circle with a light gray outer ring and purple inner fill, and a light blue circle, followed by a thick red horizontal line. The rendering uses raw SVG elements defined directly in the HTML, with inline styling for fills and strokes. Hover effects apply a CSS transform to scale the circle and line shapes on mouseover. No external libraries are used; the visualization relies solely on native SVG markup and CSS.

Ppaddyokore39@gmail.com
75% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes including circles, rectangles, and lines arranged on a 960x500 canvas. The visualization shows how basic geometric primitives are defined with attributes such as position, radius, fill color, and stroke properties. It uses raw SVG markup embedded directly in the HTML, with shapes rendered via the browser’s native SVG API without any additional JavaScript libraries. The code includes a red-filled circle, a green circle, a blue-outlined rectangle with no fill, and a diagonal navy line, illustrating core vector graphics rendering approaches.

RRkossley9090
75% match
Loading thumbnail…

Pie Chart

This pie chart example demonstrates a simple single-slice visualization rendered as an SVG path. The graphic shows one wedge of a circle, drawn using the `d` attribute of an SVG `<path>` element with an arc command. The slice is centered within a 900x500 SVG canvas, using a hardcoded radius of 125 pixels. The visualization uses the Poppins font family for any text elements, though no labels or data values are currently included. The approach is a static, standalone HTML document without any JavaScript libraries, relying purely on manual SVG path coordinates for its construction.

Vvmistry94@gmail.com
75% match
Loading thumbnail…

SVG Fundamentals RP

This example demonstrates basic SVG shapes within an HTML document, presenting circles and a rectangle with varying colors and sizes. The visualization shows a red circle, a small green circle, and a blue outlined rectangle positioned across a 960 by 500 pixel SVG canvas. The code relies on native SVG elements—circle and rect—defined directly in the markup, with attributes controlling position, radius, fill, and stroke. No JavaScript libraries are used; the index.js file only logs a message, while styles.css defines an unused message class.

Rrdpoindexter@gmail.com
75% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental SVG shape elements, including circles, rectangles, ellipses, lines, polylines, polygons, and paths, rendered with various fills, strokes, and opacity settings. It visually catalogs each shape type in a static, non-interactive layout, with the SVG markup generated directly via D3 v3’s selection and attribute methods. The code relies on D3’s `append` and `attr` APIs to construct the SVG structure, showing how basic geometric primitives compose a clear reference chart without data binding or animation.

LLuis Galindo
75% match