100%

SVG FUNdamentals

✓ Published0🌍 Public

Last edited Apr 30, 2023

Created on Apr 28, 2023

This show-and-tell of the SVG fundamentals uses only raw SVG markup, with no external libraries, to demonstrate primitives like `<rect>`, `<circle>`, `<path>`, and `<text>`. It displays how shape order affects layering, as seen with the overlapping pink and purple circles, and contrasts filled figures with stroked outlines. The graphic also illustrates path commands, including cubic and quadratic Bézier curves, relative line movements, and arcs, all rendered directly in the browser. Points A, B, and C are explicitly labeled to clarify the control points of the quadratic curve.

AI-generated description

a read me file!

any text here is fine.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, and paths, within an inline graphic. It shows how basic primitives are styled with fill colors, stroke widths, and stroke colors, and illustrates path commands like relative lines and quadratic Bézier curves. The figure marks and labels three points (A, B, C) connected by straight and curved lines, using SVG `<circle>`, `<rect>`, `<path>`, `<g>`, and `<text>` elements directly in HTML.

Pplebns-rndm2334

88% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles of varying sizes and colors, a line, and two paths with different stroke settings. It shows how basic geometric primitives can be positioned and styled within an SVG canvas. The code uses raw SVG elements like `<circle>`, `<line>`, and `<path>`, with attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width`. A commented-out `<rect>` suggests additional shape options. The rendering relies on the browser's native SVG support, with no external JavaScript libraries.

Rroyable88

86% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape primitives as a standalone visualization. It displays two circles, one rectangle, and an additional smaller circle arranged on a 930-by-480 canvas, with a purple border outlining the full drawing area. The code uses raw SVG elements (`circle`, `rect`) directly in HTML, specifying attributes like `cx`, `cy`, `r`, `fill`, and `stroke` without any JavaScript libraries. Each shape’s position, size, and color are hardcoded, showing how SVG handles simple geometric rendering and stroke styling in a static, non-interactive format.

SS1lus

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, lines, and paths, rendered in a static 960x500 viewport. The code uses raw SVG elements such as `<circle>`, `<line>`, and `<path>` to show overlapping circles, a stroke-only polyline, and a custom curved segment, with attributes like `cx`, `r`, `fill`, and `stroke-width` controlling geometry and styling. Several elements are commented out, including a rectangle, highlighting how SVG markup is manipulated directly in the HTML file without any additional JavaScript libraries or data sources.

CCurran Kelleher

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes arranged in a static composition. It shows a plain black circle, a red circle, a yellow rectangle with a thick navy outline, a diagonal navy line, and a black polyline path. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—with inline attributes for positioning, fills, strokes, and stroke widths. All shapes are drawn directly within an `<svg>` element, with no additional JavaScript libraries or data sources involved. The rendering relies entirely on SVG’s native declarative syntax.

JJudit Nagy

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG shapes, using a static, predefined dataset of geometric elements. It shows how basic primitives such as rectangles, circles, lines, and paths are defined and styled within a 960×500 coordinate system. The code uses raw SVG tags like `<rect>`, `<circle>`, `<line>`, and `<path>`, with attributes for positioning, fill colors, strokes, and widths. The visualization highlights the contrast between filled shapes and stroked outlines, and includes a multi-segment path that connects four points with a thick black line.

SShankar Ghimire

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes as a static composition, showing circles, a rectangle, a line, and a path with varied fill and stroke attributes. It uses raw SVG markup embedded directly in an HTML page, with a viewport of 960 by 500 pixels. The code intentionally includes commented-out sections and minor syntax errors, such as a broken `y1` attribute and an unterminated path, to illustrate common mistakes. The composition uses explicit coordinates and named colors, serving as a bare-bones primer on the SVG API without any JavaScript or external library.

Llili463e

84% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and their attributes in a static visualization. It shows circles with varying fill colors, a rectangle with both fill and stroke styling, and geometric paths that form a crude stick figure. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—to construct the composition. Each shape is defined with inline XML attributes such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `d` for path data, with no external JavaScript libraries or data sources.

CClaudio Puggioni

84% match