SVG Fundamentals-JM exercise

100%

SVG Fundamentals-JM exercise

✓ Published2🌍 Public

Last edited Oct 8, 2021

Created on Oct 8, 2021

This example demonstrates the foundational SVG shapes used to build a playful outdoor scene. A light blue rectangle forms the sky, a green rectangle represents the grass, and curved paths create rolling hills. The sun is constructed from circles with black eye dots and an arc for a smile, topped with a yellow hat. Other elements include a multi-circle ice cream with a cone, and a VizHub logo. All shapes are drawn using standard SVG elements like `rect`, `circle`, `line`, `path`, and `g` with inline styling, rendered in a browser.

AI-generated description

Exercise 1 from Episode 1: A demonstration of SVG shapes.

"The sun has got his hat on, hip-hip-horay!"

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example shows a simple SVG scene of a house, grass, sun, and clouds built entirely with basic SVG shapes. It demonstrates fundamental SVG rendering by using rect elements for the house, chimney, door, and grass, a path for the roof, and circles for the sun, door handle, and clouds. The code applies inline SVG attributes like x, y, width, height, fill, and stroke, and sets a viewBox of 0 0 900 450. The page is plain HTML with no JavaScript libraries, relying solely on the SVG specification.

AAndrielle Hillis

78% match

Loading thumbnail…

SVG Fundamentals (JCJaime)

This example demonstrates a collection of basic SVG shapes, including circles, a rectangle, a path with an arc, a line, and layered points, all rendered within a fixed 960x500 canvas. The code uses embedded inline SVG elements directly in an HTML file, without external libraries. It illustrates how to set visual properties like fill colors, stroke width and color, and coordinates for each geometric primitive. The composition includes overlapping shapes and comments, showing the straightforward, static nature of SVG markup for simple graphics and layout.

Jjcjaimeg@gmail.com

77% match

Loading thumbnail…

SVG fundamentals

An SVG playground demonstrates fundamental vector shapes—a circle, rectangle, line, ellipse, and a complex path with arcs and quadratic curves—drawn directly in an HTML document. The static scene uses no external libraries, relying solely on the browser's native SVG support with inline attributes like `cx`, `rx`, and `d` for path data. Shapes are styled via presentation attributes, including fills, stroke colors, and a transparent rectangle with a green outline. The example serves as a minimalist reference for constructing basic geometric primitives and path commands in Scalable Vector Graphics markup.

邱邱敬淳

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

76% match

Loading thumbnail…

SVG Fundamentals

This example shows a simple arrangement of geometric shapes—a green circle and four gray rectangles of varying sizes and positions—composed directly in SVG. The visualization demonstrates fundamental SVG markup, using inline `<circle>` and `<rect>` elements within an `<svg>` container to define primitive shapes. No JavaScript libraries or data sources are involved; the rendering relies entirely on static SVG attributes such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `fill` to position and style each shape.

CChris Hudson

76% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering with several geometric primitives. It displays a plain circle, a skyblue-filled circle, a blue rectangle, and a green diagonal line with a thick stroke, all positioned within a 960-by-500 coordinate system. The visualization uses raw SVG markup embedded directly in an HTML page, with no external libraries or JavaScript. The shapes are defined using SVG elements such as `circle`, `rect`, and `line`, with properties like `fill`, `stroke`, and `stroke-width` controlling appearance. The code originates from a fork on VizHub, showcasing fundamental vector-graphics construction without data binding or interaction.

MMuhammad Awais

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

76% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes in a single static graphic, including a circle, a red-filled circle, an outlined blue rectangle, a thick black line, and a polyline path. It shows how the basic geometric elements—circle, rect, line, and path—are defined with coordinates and styling attributes such as fill, stroke, and stroke-width. The rendering uses inline SVG within an HTML document, with no external libraries or data sources. The code illustrates manual layout by specifying each element’s position, size, and appearance directly in the markup.

Jjmetzg11alpine

76% match