Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals Exercise

✓ Published2🌍 Public
Ttverdone
Last edited Jul 12, 2023
Created on Jul 10, 2023
Forked from HTML Starter

A standalone SVG demonstrates fundamental shape primitives inside a single `<svg>` viewport. A yellow rectangle animates its corner radius from zero to a full pill shape and back, while two circles and an ellipse form a static face-like composition. The entire group moves along a rectangular path using the native SVG `<animateMotion>` element, with the rectangle’s shape change driven by `<animate>`. The page uses no external libraries, relying entirely on inline SVG markup and the browser’s built-in animation APIs.

AI-generated description

A demonstration of SVG shapes!

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental SVG shapes—circle, rectangle, line, and path—as static elements in a 960×500 viewport. It uses raw SVG markup within an HTML document, with no JavaScript libraries. Each shape illustrates basic attributes like fill, stroke, and coordinates, including a red inner circle layered over a larger black circle and a yellow rectangle with a navy border. The path uses the `d` attribute to define a straight polyline, while the line connects from the origin to (100,100).

LLashika Arunachalam
83% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape animation and interactivity. It displays a single black rectangle with rounded corners that continuously morphs its corner radius and horizontal position over a six-second loop while an inline CSS rule changes the shape’s fill to red on hover. The rendering relies entirely on raw SVG elements—`<rect>` and `<animate>`—inside an HTML page, with CSS transitions applied to the `circle` selector (which does not affect the rectangle) and the `:hover` pseudo-class for the fill change. No external libraries or data sources are used.

KKris
83% 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
82% match
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
82% match
Loading thumbnail…

TD_SVG FUndamentals

This example demonstrates fundamental SVG shapes and animation within a single static HTML page. A green rectangle acts as the background and spins via an `animateTransform` rotation while its corner radius animates through an `animate` element. Overlaid on this are a blue line and three concentric circles in red, yellow, and green. The rendering uses raw SVG markup within `index.html`, with animation driven by native SVG animation elements rather than external libraries.

TTatjana Dzambazova
82% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, and a line, composed within a 960×500 viewport. It uses raw SVG markup in an HTML document, styling elements via presentation attributes such as `fill`, `stroke`, and `stroke-width`. The code explicitly shows circles with red and green fills, a yellow rectangle with a blue border, and a blue outline rectangle, though it does not rely on any JavaScript libraries or external data. Rendering is handled entirely by the browser’s native SVG support.

Ttkhalid.ds@gmail.com
82% match
Loading thumbnail…

SVG Fundamental

This example demonstrates basic SVG shapes, including circles, rectangles, lines, and a path, rendered in a 960x500 viewport. One circle uses SMIL animation to pulse its radius, while a rectangle changes fill color and stroke width on hover via CSS transitions. The code relies on native SVG elements and CSS, with no external libraries, and draws a large blue stroke frame around the canvas.

Vvschan2
82% match
Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental shapes available in SVG, including circles, rectangles, lines, and paths. It shows how basic attributes such as position, size, fill color, stroke color, and stroke width control each shape’s appearance. The visualization is rendered directly in the browser using inline SVG within an HTML document, with no external libraries or data sources. The code defines static shapes, such as a yellow rectangle with a navy border and a three-point path, to illustrate raw SVG markup and its declarative syntax.

Aaidarshafeev1@gmail.com
82% match