SVG Exercise

100%

✓ Published0🌍 Public

Last edited May 6, 2022

Created on May 6, 2022

This example demonstrates basic SVG shape drawing and styling within a static, hard-coded visualization. It shows three concentric circles centered at the same coordinate, with each circle filled in yellow, red, and green respectively to create a layered target-like effect. A large rectangular shape with a navy stroke is positioned beside the circles, while a diagonal line and a path with a squared segment extend across the canvas. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—with attributes for positioning, fill, stroke, and width, all defined directly in the markup without any JavaScript library or data binding.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape primitives within a static 960-by-500 canvas. It displays a default black circle, a red circle, a yellow rectangle with a navy border, a diagonal navy line, and a stroked path with a missing stroke attribute typo. The code uses the raw SVG API directly inside an HTML document, without any JavaScript libraries or external data sources, relying solely on inline SVG elements and their presentation attributes.

JJMeils

87% 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

86% match

Loading thumbnail…

SVG Exercise

A yellow rectangle with thick navy borders forms the frame of this fixed-size SVG composition. Overlapping red and blue circles are centered inside, while four additional navy lines of varying thickness outline the rectangle’s edges using basic SVG primitives. The demonstration uses inline SVG shapes—`rect`, `circle`, and `line`—with explicit pixel coordinates, stroke widths, and fill colors, showing how layered vector elements can create a simple geometric pattern without any JavaScript or data-binding library.

CChristopher Campbell

86% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape drawing, including circles, rectangles, lines, and paths, with attributes for fill, stroke, and stroke width. The shapes appear in a 960 by 500 canvas, using a yellow rectangle with a blue border and red filled circles among other elements. The code directly embeds SVG markup in HTML, using native SVG elements like `circle`, `rect`, `line`, and `path`. It showcases how geometric primitives and custom paths via the `d` attribute define visual output, with no external JavaScript libraries or data sources.

WWasanta Pruttisarikorn

86% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes by rendering three circles, two rectangles, and a line on a 960 by 500 canvas. The visual shows how fill colors, stroke colors, and stroke widths vary across these basic geometric elements, including a circle with a yellow fill and blue outline. Using raw SVG markup within an HTML document, the code specifies coordinates and styling attributes directly on each shape element, with the outermost rectangle acting as a blue frame around the composition.

Ttriciascully

86% 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

86% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to draw basic geometric shapes in SVG. It shows a large, unfilled circle with a thick lime stroke, alongside a red, filled path that forms an angular line. The code uses raw SVG elements, including `circle` and `path`, defined within an HTML `svg` canvas. Several other shapes, such as a rectangle and a line, are present but commented out. The visualization is rendered statically, serving as a fundamental primer on SVG's shape-drawing capabilities.

IIvan Kraev

86% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG shapes in a static 960x800 canvas, using plain SVG markup directly in the HTML. It shows three circles with different radii and colors, a yellow rectangle with a navy stroke, a red diagonal line, and a black polyline path defined by an M/L command sequence. The rendering relies on native SVG elements such as circle, rect, line, and path, with attributes like cx/cy, width/height, and stroke-width. No JavaScript or external libraries are involved, highlighting core SVG syntax for geometry and styling.

Ddomiauer

86% match