Untitled

100%

✓ Published0🌍 Public

Last edited Feb 8, 2022

Created on Feb 8, 2022

Forked from Shapes and Colors with SVG and CSS

A single gray circle is drawn on an empty SVG canvas. The example demonstrates basic SVG shape construction within an HTML document, using a fixed `circle` element with specified center coordinates and radius. The rendering relies on SVG (Scalable Vector Graphics) through the browser's native support, not an external library. The provided `styles.css` file contains general body and class rules, but the visualization itself does not reference them. The data source is a static, hard-coded coordinate value.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A single black circle is rendered on a blank gray background, centered horizontally near the top of a 960 by 500 SVG canvas. The circle has a fixed radius of 100 pixels and a solid dark fill. The example demonstrates basic SVG shape creation using a direct `<circle>` element written in HTML, without any JavaScript or D3.js logic in the rendering itself. The accompanying code imports D3’s `select` function and a local ES6 module, but those are not used to draw the graphic.

Kksra7900

89% match

Loading thumbnail…

Untitled

A single gray circle sits centered on a blank 960×500 SVG canvas. The example demonstrates the minimal structure of an SVG graphic within an HTML document, using no external libraries or JavaScript. The circle is defined directly in the markup with an `r` attribute of 100, though its fill color is left unspecified, defaulting to black. This bare-bones file shows the fundamental building blocks for browser-based vector graphics.

RRandomY-2

89% match

Loading thumbnail…

Untitled

This example shows a single, large circle rendered on a blank SVG canvas, with no interaction or animation. The visualization relies on an inline SVG element sized to 960 by 500 pixels, containing a circle with a radius of 100. The code uses plain JavaScript and CSS within an HTML page, with the SVG’s `circle` element as the only visual mark, and the page is set up with a hidden overflow. No external data or libraries are used, and the styling is minimal, focusing on the bare structure of an SVG graphic.

HHaris Vidimlic

85% match

Loading thumbnail…

test

This example shows a single gray circle rendered in the center of an SVG canvas. The visualization is minimal, displaying only the circle with a radius of 100 units and no additional data or interactivity. The code uses plain HTML and inline SVG elements, with the circle defined directly in the markup. No JavaScript, CSS styling, or external libraries are involved, making it a bare-bones demonstration of SVG's basic shape rendering within a web page.

KKaalveniiz

84% match

Loading thumbnail…

Untitled

This example shows a static SVG canvas containing a single blue rectangle with a thick black outline and a circle positioned near its upper-left corner. The HTML document defines the SVG element with explicit width and height attributes, then draws the shapes using basic SVG primitives. The rectangle uses incorrect attribute spellings ("heigth" and "stroke" instead of "height" and "stroke"), while the circle specifies its radius and center coordinates. The visualization demonstrates fundamental vector graphics rendering through raw SVG markup embedded directly in an HTML page without any external libraries or JavaScript.

CCK-Langat

84% match

Loading thumbnail…

Untitled

This example shows a single large yellow circle centered on a black-outlined SVG canvas. The circle is drawn using raw SVG elements with fixed coordinates and styling, without any JavaScript or data binding. It demonstrates a minimal static graphic that relies on the `circle` element’s `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The page uses inline CSS to remove body margins and hide overflow, producing a clean, full-viewport presentation of the shape.

MMike Majzoub

84% match

Loading thumbnail…

Untitled

A simple yellow circle with a black outline, rendered at the center of a 960 by 500 SVG canvas, demonstrates the basic use of SVG elements in a minimal HTML page. The circle is defined directly in the markup with explicit x, y, and radius attributes, while the page relies on CSS to reset margins and hide overflow. This example uses vanilla SVG, not React or a visualization library, and illustrates a static, hand-authored graphic rather than data-driven rendering.

Cclatester1

83% match

Loading thumbnail…

Untitled

This example draws a single circle in an SVG using D3.js v5. The circle is appended to the root `<svg>` element and positioned with hard-coded values for its center and radius, using the `select` and `append` APIs. The circle’s radius is set to half the SVG’s height, and its x- and y-coordinates are both set to half the SVG’s height, resulting in a face-like shape centered vertically. The page loads D3 from an unpkg CDN and includes minimal CSS that hides overflow.

SShahAlvi

83% match