Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals

✓ Published0🌍 Public
IIlyas Filali
Last edited Dec 6, 2022
Created on Dec 6, 2022
Forked from HTML Starter

This example demonstrates raw SVG shape drawing within a web page. It shows a blue circle, a second black circle, and a thick navy diagonal line rendered on a 960 by 500 canvas. The code uses the standard SVG elements `circle` and `line`, defining their positions with `cx`, `cy`, `r`, `x1`, `y1`, `x2`, and `y2` attributes. Colors and stroke width are set directly via the `fill`, `stroke`, and `stroke-width` presentation attributes, with no external data or scripting involved.

AI-generated description

A demonstration of svg shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape primitives within a web page. It renders a single black circle and a diagonal navy line directly using SVG elements. The code relies on the native SVG API, defining shapes with `circle` and `line` tags inside an `<svg>` container. Coordinates and styling are specified via attributes such as `cx`, `cy`, `r`, `x1`, `y1`, and `stroke`, with no external JavaScript libraries or data sources involved.

LLars van Dijk
91% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—a circle, a rectangle, and a line—positioned on a 900-by-450 pixel canvas with a visible black border. The circle is stroked with blue and unfilled, the rectangle is filled green with a blue outline, and the diagonal line is drawn in red. The code uses raw SVG markup embedded directly in an HTML document, specifying coordinates, dimensions, and colors via attributes like `cx`, `cy`, `r`, `width`, `height`, and `stroke-width`. No JavaScript libraries are employed; all rendering is handled natively by the browser's SVG engine.

AAshwani Sajwan
91% 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
90% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering in a bare HTML page. It shows a black circle centered at the top-left and a blue diagonal line crossing the coordinate space. The code uses the SVG `<circle>` and `<line>` elements directly within an inline `<svg>` container, without any external JavaScript libraries. The rendering relies entirely on SVG’s built-in vector graphics capabilities, with attributes like `cx`, `cy`, `r`, and `stroke` controlling geometry and appearance. The page is static, containing no interaction or data-driven updates.

Aadityapalliyil0@gmail.com
90% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes drawn directly in an HTML document without any JavaScript libraries. It shows a blue circle positioned at coordinates (100,100) with a radius of 50, and an orange rectangle starting at x=200 with a blue stroke outline. The SVG canvas is 800 pixels wide by 500 pixels high. The code uses raw SVG elements—`<circle>` and `<rect>`—with attributes for positioning (cx, cy, r, x, y) and styling (fill, stroke, stroke-width), illustrating fundamental vector graphics rendering in the browser.

Bbnieskens
89% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates three basic SVG shapes—a red circle, a yellow rectangle with a navy border, and a diagonal line—positioned on a 960×500 canvas. The code uses raw SVG elements (`circle`, `rect`, `line`) directly in HTML, with attributes such as `cx`, `cy`, `r`, `stroke`, and `stroke-width` controlling geometry and styling. No JavaScript libraries are involved; the rendering is purely declarative SVG. The visualization serves as a minimal reference for how SVG coordinates, fill colors, and strokes work in a standalone document.

DDilara Bozkurt
89% match
Loading thumbnail…

SVG fondamentals!

This example demonstrates the fundamental shapes of SVG. A blue circle and a red circle are drawn side-by-side, with a large rectangular outline framing the entire canvas in blue. The example also attempts to draw a line across the lower portion of the canvas. The markup uses raw SVG elements, including `circle`, `rect`, and `line`, with attributes like `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width`. The overall piece serves as a basic illustration of SVG syntax and shape rendering in an HTML document.

RRalitza
89% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the core building blocks of SVG graphics, showing how basic shapes combine to form a static vector illustration. It features a red circle, a blue rectangle, a thick navy diagonal line, and an open path that creates a two-segment angular stroke on a 960x500 canvas. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—defined directly in an `index.html` file without any JavaScript library. Each shape is styled via presentation attributes like `fill`, `stroke`, and `stroke-width`, while a comment in Spanish notes the markup. This is a pure, hand-authored SVG example, with no external data source.

JJhonatan Perera
89% match