SVG Practice

100%

✓ Published0🌍 Public

Last edited Apr 24, 2023

Created on Apr 24, 2023

A practice page for hand-coded SVG primitives. It draws a single red circle and an orange rectangle with a blue outline using inline SVG elements, placing them alongside an HTML text message. The example demonstrates basic shape creation and styling directly in the markup, without any JavaScript libraries. The code includes a minor syntax error in the rectangle’s y attribute and uses a large 13em font for the accompanying text.

AI-generated description

A practice at using SVG

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

82% match

Loading thumbnail…

SVG TEST

This example demonstrates the basic building blocks of SVG graphics on a plain HTML page. It shows how to create and style two circles and a rectangle using inline SVG elements, with one circle left unfilled and the other filled red. The rectangle uses a blue stroke with a width of 10 and no fill. The code exercises fundamental SVG attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` within a fixed 200 by 200 coordinate system. No external libraries or data are involved; the visualization relies entirely on hand-written markup.

Bbtkg

81% match

Loading thumbnail…

practice1

A minimalist SVG canvas displays four distinct geometric primitives: a filled blue circle, an unfilled red rectangle with a thick stroke, a black diagonal line, and a brown polyline path. The drawing demonstrates fundamental vector graphics rendering via the HTML5 `<svg>` element, using direct attribute declarations for coordinates, dimensions, and styling. The static composition, sourced from the file `v3`, highlights basic shape construction without interaction or animation.

TTian1398

81% match

Loading thumbnail…

practice

This example displays a static arrangement of SVG primitives, including a red circle, a green circle, a purple rectangle, and a long blue line drawn directly in the HTML markup. The visualization uses raw SVG elements defined inside the `index.html` file without any JavaScript data-binding or animation libraries. It demonstrates basic geometric shapes positioned along the x and y axes, with the line spanning far beyond the visible viewport. The page relies solely on HTML and CSS, as referenced in the README, with no React framework integration in the rendered output.

Iinvachyx

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

81% match

Loading thumbnail…

SVG practice

This example shows a single red circle rendered inside an SVG element, serving as a minimal demonstration of SVG drawing within a React project. The code directly embeds the SVG markup in an HTML page, using the `<circle>` element with `cx`, `cy`, `r`, and `fill` attributes to establish the circle’s position, size, and color. It does not use any external JavaScript libraries or data sources, relying purely on native browser rendering of SVG. The visualization acts as a foundational practice sketch for working with vector graphics in a web context.

Ttamarailic

80% match

Loading thumbnail…

SVG Fundamentals

This example showcases basic SVG fundamentals by rendering two primitive shapes: a red circle and a blue rectangle. It demonstrates how to create and style SVG elements directly within an HTML page using inline SVG markup. The code uses native SVG elements—`circle` with `cx`, `cy`, `r`, and `fill` attributes, and `rect` with `x`, `y`, `width`, `height`, and `fill`—to illustrate position, size, and color properties. No external libraries or data sources are involved; the example relies purely on static, hand-coded SVG in a plain HTML file.

Mmihaela diaconu

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

80% match