Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals Exercise

✓ Published1🌍 Public
JJC Hizarsa
Last edited Jun 18, 2024
Created on Jun 17, 2024
Forked from HTML Starter

A caterpillar built from stacked SVG ellipses and rectangles demonstrates primitive shape composition. The code renders a segmented body with varying radii and fill colors, plus legs, eyes, and antennae using `<ellipse>`, `<rect>`, `<circle>`, and `<path>` elements. Each shape is positioned manually via `cx`, `cy`, `x`, and `y` attributes within a fixed 960×500 viewport. The example uses raw SVG markup without any JavaScript libraries, showcasing static vector graphics in a plain HTML document.

AI-generated description

An interpretation of the exercise following Episode 1: SVG Fundamentals. He's not that hungry anymore. Probably ready to go through metamorphosis.

MIT Licensed

Similar vizzes

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
83% 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.

邱邱敬淳
83% match
Loading thumbnail…

SVG Fundamentals

This example introduces SVG fundamentals by directly embedding shapes—circles, rectangles, and lines—in an HTML document. It demonstrates the use of SVG attributes such as x, y, cx, cy, r, width, height, fill, and stroke to control positioning, dimensions, and visual styling of primitive elements. The code also showcases layering, as the rectangle and lines are drawn over the circles, and renders a static composition inside a 500×500 viewport using inline SVG markup.

Aanilthapa1.at23@gmail.com
83% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering in a static HTML document. It shows several primitive shapes—circles, a rectangle, and a line—positioned on a 700×500 canvas. The code uses the native SVG API directly, with inline attributes like `cx`, `cy`, `r`, `x`, `y`, `stroke`, and `fill` to define geometry and styling. No JavaScript libraries are involved; the shapes are drawn declaratively in markup, and the only script is a console log. The visual output highlights how SVG handles vector graphics through XML elements.

Ccrajy030@mymail.unisa.edu.au
83% match
Loading thumbnail…

SVG_Fundamentals

This example demonstrates fundamental SVG shapes, including rectangles, circles, and ellipses, rendered directly in an HTML document. It shows how basic vector graphics are constructed using standard SVG elements within the body of a webpage. The visualization uses the native SVG API via inline markup in the `index.html` file, with no external JavaScript libraries or data sources. The page is intentionally minimal, focusing purely on the static presentation of geometric primitives without any interactivity or dynamic behavior.

SSShresthaTufts
83% match
Loading thumbnail…

SVG Fundamentals - excercise

This example demonstrates fundamental SVG shape elements and path commands within a single 900 by 900 canvas. It shows a black outlined rectangle with no fill, two circles with default and explicit red fills, a green stroked path, a thick navy line, and a black polyline created via path data. The page renders entirely through inline SVG in HTML, using basic attributes for geometry, stroke, fill, and stroke-width, with no external libraries.

Yyejichun@naver.com
82% match
Loading thumbnail…

SVG Fundamentals Create + Share Exercise

This example demonstrates basic SVG shape rendering within an HTML page, featuring circles, rectangles, lines, paths, and an ellipse with CSS styling and hover transitions. The code uses raw SVG elements with inline attributes for positioning, sizing, and colors, plus a CSS ruleset that applies a lavender background and a 3-second transition effect on the ellipse. JavaScript is not present; the visualization relies purely on static SVG markup and CSS interactivity, including a hover state that changes the ellipse’s fill from yellow to orange.

Aandu006@gmail.com
82% 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
82% match