first project

100%

✓ Published1🌍 Public

Last edited May 12, 2023

Created on May 12, 2023

This example demonstrates two simple circles positioned side-by-side, one black and one red, to illustrate basic SVG drawing. The visualization is static and contains no interactive elements or data encoding. It is rendered directly within an HTML file using inline SVG markup, with the `circle` element specifying center coordinates and radius. The file is authored by ihsane13 and serves as a foundational exercise in creating shapes with vector graphics.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

FirstSVG

This example shows the HTML5 SVG element rendering two circles: a default black circle and a red circle with a larger radius. The page contains static, hand-coded SVG markup embedded directly in the HTML, with no external JavaScript libraries. It demonstrates basic SVG shape creation through the `<circle>` element, specifying position and radius via the `cx`, `cy`, and `r` attributes, and styling through the `fill` attribute. The visualization is a minimal, non-interactive illustration of SVG's native vector graphics capabilities within a web page.

Sshub

85% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering by drawing two circles on a blank canvas. The first circle uses the default black fill, while the second is explicitly colored red. The code relies on native SVG elements—`<circle>` with `cx`, `cy`, and `r` attributes—inside an inline `<svg>` tag. The rendering approach follows the SVG specification directly, requiring no external libraries or JavaScript, and shows how static vector graphics are defined purely through markup.

Mmohsinakhtaralam

84% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG shapes using two circles rendered directly in a web page. It shows how circles can be drawn with default styling and explicit `fill` attributes, with the first circle appearing in black and the second in red. The visualization relies on raw SVG markup within an HTML document, without any JavaScript libraries, and uses the `cx`, `cy`, and `r` attributes to position and size each shape.

SSarah Miller

84% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates SVG fundamentals with two circles rendered inline in an HTML document. The first circle uses default black fill, while the second is explicitly styled with a red fill. The code directly embeds SVG elements using the `<svg>`, `<circle>`, and `fill` attribute, showing basic shape creation and styling without any JavaScript libraries. Both circles are positioned via `cx` and `cy` coordinates with a radius of 50, illustrating how SVG primitives render visually in a browser.

AAjay Pathak

83% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes by rendering two circles in a web page. The first circle appears with default black fill, while the second uses an explicit red fill, showing how SVG handles default and specified color properties. The visualization relies on the native SVG API through inline `<circle>` elements and standard attributes like `cx`, `cy`, `r`, and `fill`. No external libraries or data sources are used; the rendering is purely declarative SVG markup embedded directly in the HTML document.

ZZainab Rangwala

83% match

Loading thumbnail…

SVG Fundamentals

A demonstration of basic SVG shapes, with two circles of different positions and styling. The first circle uses default black fill, while the second is explicitly colored red with a black stroke. The example shows how SVG elements are declared directly in HTML markup, using circle elements with cx, cy, and r attributes to define geometry, and fill and stroke properties for visual appearance. The rendering is static SVG without any JavaScript libraries or data binding.

AAndré Shamsabadi

83% match

Loading thumbnail…

SVG start

This example demonstrates the basic structure of an SVG visualization, showing a single red circle positioned within a coordinate system. The rendering relies on native SVG elements embedded directly in the HTML document, without any JavaScript libraries or data sources. The circle is defined using the `<circle>` tag with explicit `cx`, `cy`, and `r` attributes for its center coordinates and radius. While the code attempts to set the fill color via a `color` attribute, that property is not valid in SVG, so the circle would appear black by default, highlighting a common syntax error for beginners.

KKati-dev-hu

83% match

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG rendering on an HTML page, showing two circles—one default black and one explicitly colored red—positioned at different coordinates. The code uses plain SVG elements within an inline `<svg>` tag, with the first circle relying on default styling and the second setting a `fill` attribute. It illustrates basic SVG shape creation without external libraries, serving as a minimal introduction to vector graphics in the browser. The rendering approach is purely declarative, using static markup for immediate visual output.

Uupbound-web

83% match