Fork of SVG Fundamentals

Fork of SVG Fundamentals

This fork of SVG Fundamentals demonstrates basic SVG shape creation and manipulation within an HTML page. The example renders two overlapping circles in red and green, a navy diagonal line, and a black polyline path, all defined through inline SVG elements. The code explicitly uses the `<circle>`, `<line>`, and `<path>` SVG APIs to construct the vector graphics, with visual properties like fill colors, stroke colors, and stroke widths set as attributes. The rendering approach relies on the browser’s native SVG support, with body margins removed for a clean display.

FFangda Qiu

Fork of SVG Fundamentals

This example demonstrates basic SVG shape construction, showing how circles, lines, and paths render in a fixed 960×500 canvas. It includes overlapping red and green circles, a navy diagonal line, a custom curve path, and an open polyline path drawn with a black stroke. The code uses raw SVG elements—`circle`, `line`, and `path`—with inline attributes for coordinates, colors, and stroke widths. A commented rectangle element shows alternative shapes not currently displayed. The SVG is embedded directly in the HTML body with CSS removing page margins and overflow.

EElisa Mendoza

Fork of SVG Fundamentals

This fork demonstrates fundamental SVG shapes and attributes in a raw, unstyled 960x500 canvas. The code draws overlapping circles with explicit `cx`, `cy`, `r`, and `fill` properties, a thick navy `line`, a complex closed `path` with cubic Bézier commands, and another open `path` with a black stroke. The markup also includes an inert `<rec>` element—an intentional typo—and an empty commented-out `<rect>`. The example relies entirely on native SVG elements, using no external libraries, and renders directly in the browser via inline SVG.

Ddora.frauscher@gmx.at

Fork of SVG Fundamentals

This fork of SVG Fundamentals demonstrates basic vector graphics primitives within an HTML `<svg>` element, using no external JavaScript libraries. The example shows overlapping red and green circles, a diagonal navy line, a complex `path` with cubic Bézier curve commands, and a stroked two-segment path, though the yellow rectangle is commented out. The SVG markup is paired with minimal embedded CSS that removes page margins and hides overflow. The rendering relies entirely on native SVG shape elements and attributes like `cx`, `cy`, `r`, `x1`, `y1`, `d`, and `stroke-width`.

KKiranmayi Vadlamudi

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes, including overlapping circles, a line, and paths, within a 960x500 viewport. Anchored elements like the red and green circles at (150,50) and a navy line from (0,0) to (100,100) illustrate basic positioning and styling. The rendering uses raw SVG markup in an HTML body, with shapes defined via `<circle>`, `<line>`, and `<path>` elements. It also shows a commented-out `<rect>` and a path using cubic Bézier commands, highlighting static vector graphics without JavaScript libraries.

MMaras13

Fork of SVG Fundamentals

This fork of the SVG Fundamentals example demonstrates basic shape rendering and layering within an SVG canvas. It shows how circles, lines, and paths are drawn, with one circle overlaying another to create a simple visual hierarchy. The code uses standard SVG elements directly in HTML, with no additional libraries, and applies inline styling and attributes to control fill, stroke, and dimensions. A commented-out rectangle and a visible path with a polyline illustrate different shape behaviors. The rendering approach relies entirely on static SVG markup, making it a clear introduction to vector graphics primitives.

GGwanwoo

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes through a simple static composition. It shows two overlapping circles in red and green, a navy diagonal line, a horizontal path forming a rounded rectangular shape, and a black polyline with a sharp corner. The visualization uses raw SVG elements embedded directly in HTML, including `<circle>`, `<line>`, and `<path>`, all rendered with explicit coordinates and styling attributes. The code relies solely on the native SVG API without additional JavaScript libraries, and the rendering is entirely vector-based.

HHamim Rahman

Fork of SVG Fundamentals

The visualization demonstrates fundamental SVG shapes, including overlapping circles, a line, and two distinct path elements, rendered on a 960-by-500 canvas. It highlights how fill and stroke attributes affect appearance, with a red and green circle overlapping, a navy line, and paths drawn in black. The example also includes commented-out code for a rectangle, showing alternative shape configurations. The HTML file directly embeds SVG markup, with CSS resetting margins and hiding overflow, presenting a clean, minimalist demonstration of vector graphics primitives.

NNixonthiyagesh-Hexa