Skip to main content
SimilarExport ZIP
100%

SVG fundamentals

✓ Published0🌍 Public
IIan A Dalton
Last edited May 16, 2022
Created on May 16, 2022
Forked from HTML Starter

This example demonstrates two basic SVG shapes, a red circle and a navy line, positioned within an SVG canvas. The circle has a radius of 50 pixels and is placed at coordinates (50,50), while the line spans from the origin (0,0) to (100,100) with a stroke width of 4 pixels. The rendering uses the SVG element directly in an HTML document, with shape properties (like `cx`, `cy`, `r`, `fill`, `x1`, `y1`, `x2`, `y2`, `stroke`, and `stroke-width`) specified as attributes. The code is authored by Ianad and is a static illustration with no interactivity or data source.

AI-generated description

A demonstration of SVG shapes

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates two basic SVG shapes: a red circle and a navy line, drawn within an inline `<svg>` element. It shows how static vector graphics can be defined declaratively using SVG’s coordinate system, with the circle centered at (50, 50) and the line spanning from the origin to (100, 100). The code uses plain SVG markup—`<circle>` and `<line>` elements with attributes for position, radius, fill, and stroke—without any JavaScript libraries or data sources. The rendering approach is direct SVG in HTML, highlighting fundamental shape properties and styling.

Ttomngeorge1@gmail.com
92% match
Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG graphics as rendered directly in a web browser. A solid blue circle is positioned at coordinates (100, 50) with a radius of 50, while a navy line stretches from the origin to point (100, 100), with a stroke width of 10 pixels. The visualization uses raw SVG markup within an HTML document, specifying a 960 by 500 pixel canvas. The code employs the `<circle>` and `<line>` elements, along with attributes like `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` to define shapes and their visual properties.

FFiona0229
89% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering in a static, fixed-size canvas. A red rectangle with a blue outline, a blue diagonal line, and a circle are each positioned using explicit `x`, `y`, `width`, `height`, `cx`, `cy`, and `r` attributes. The SVG markup is written directly in the HTML, using no JavaScript libraries or data sources. The shapes illustrate fundamental SVG primitives and their styling properties, including `fill`, `stroke`, and `stroke-width`, with no interaction or dynamic behavior.

Bblaze-d83
88% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG fundamentals by rendering two primitive shapes—a circle and a line—inside a 500×500 SVG canvas. The circle, positioned at coordinates (50,50) with a radius of 50, uses default black fill, while the line spans from (0,0) to (100,100) with a navy stroke. The code is a minimal HTML page that directly embeds SVG markup, relying on CSS and JavaScript only as referenced in the accompanying README. It illustrates raw SVG syntax without any external libraries or data sources.

JJoel George
88% match
Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG shapes—a red circle, a navy rectangle with a peru stroke, and a black line—rendered directly in HTML using inline SVG markup. The code defines a 1000x1000 SVG canvas and positions each shape with explicit coordinate attributes such as `cx`, `cy`, `x`, `y`, and `x1`/`y1`. It demonstrates basic styling through fill and stroke properties, including stroke-width. No external libraries or data sources are used; the visualization relies entirely on native SVG elements within a static HTML document.

AAhmet Cetin
88% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape elements in a static 500x500 canvas, showing how circles, rectangles, lines, and paths are defined with coordinates and styling attributes. The code uses raw SVG markup directly in the HTML, specifying fill colors, stroke properties, and geometric values such as radius, width, and height for each shape. A red circle, pink rectangle, blue line, and an open path are rendered without any JavaScript libraries or interaction, relying solely on SVG’s built-in rendering capabilities. The path command draws a diagonal line from the top-left to the lower-right area, with a commented-out alternative path left inactive.

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

SVG Fundamentals

This example demonstrates basic SVG shape rendering by drawing two concentric circles on a 960 by 500 canvas. The larger red circle has a radius of 50 pixels, while the smaller green circle sits inside it with a radius of 30 pixels, both centered at the same coordinates. The code uses raw SVG elements—`svg`, `circle`, and their `cx`, `cy`, `r`, and `fill` attributes—directly in the HTML without any JavaScript libraries. Rendering is handled entirely by the browser’s built-in SVG support, as the shapes are declared statically in the document body.

Zzerzenka
88% match