Concentric circles chart using SVGt

100%

Concentric circles chart using SVGt

✓ Published0🌍 Public

Last edited Sep 27, 2021

Created on Aug 28, 2021

A concentric circles chart displays two nested circles centered at the origin, rendered as an SVG viewBox with a range of -100 to 100. The outer circle has a radius of 50 and a fill of rgb(0,122,176), while the inner circle has a radius of 10 and a fill of rgb(162,207,225). The example uses the SVG `<circle>` element directly within an inline `<svg>` tag, with no JavaScript libraries or external data sources involved. It demonstrates a minimal, static visualization of hierarchical proportions through simple geometric layering.

AI-generated description

Concentric circles chart using SVG

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows a nested set of concentric circles centered on a 550 by 550 SVG canvas, with the two largest circles filled in pale pink and thinner grey outlines marking the inner radii. The visualization uses only static SVG elements—specifically `circle` tags with explicit pixel coordinates—so no JavaScript libraries or data-binding frameworks are involved. The rendering approach relies on basic SVG attributes like `fill`, `stroke`, and `r` to create a simple radial hierarchy, suggesting a possible target for force-directed or layered layout experimentation, though no dynamic behavior is present.

AAdrSieber

81% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG fundamentals using concentric circles stacked at the center of a 1000×1000 canvas. The circles decrease in radius from 100 to 50 pixels, each with a distinct fill color ranging from tan to salmon. The visualization also includes a black polyline path drawn from point (400,600) through (700,600) to (600,700). The code directly uses SVG elements like `<circle>` and `<path>` within plain HTML, with additional commented-out examples of `<rect>`, `<line>`, and other path configurations.

Sspace-captain96

80% match

Loading thumbnail…

Circles with SVG

This example displays twelve pastel-colored circles scattered across an SVG canvas, each positioned at fixed coordinates with varying radii. The visualization demonstrates static SVG rendering with a simple, decorative composition, using no external libraries or JavaScript for interaction. The circles are defined directly in markup with individual `fill` attributes, while CSS centers the SVG on a light gray background and applies a subtle shadow and rounded corners. The code relies on basic SVG elements and inline styling, with `index.js` containing only a placeholder console statement.

223100098@lums.edu.pk

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamentals of SVG drawing using four nested circles to create a concentric target pattern in red, white, and red. The circles are centered at the same coordinates, with radii decreasing from 110 to 20 pixels, achieving a layered bullseye effect. The code uses raw SVG elements within an HTML page, styled with CSS to remove the scrollbar. JavaScript is not active in this visualization; instead, the circles are declared directly in the `index.html` file. The `body` margin is set to zero and `overflow` is hidden to maximize the viewing area.

RRonanFonseca

79% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering by drawing two concentric circles on a 960 by 500 canvas. The larger red circle has a radius of 50 pixels, while the smaller green circle sits inside it with a radius of 30 pixels, both centered at the same coordinates. The code uses raw SVG elements—`svg`, `circle`, and their `cx`, `cy`, `r`, and `fill` attributes—directly in the HTML without any JavaScript libraries. Rendering is handled entirely by the browser’s built-in SVG support, as the shapes are declared statically in the document body.

Zzerzenka

79% match

Loading thumbnail…

Concentric circles

Concentric circles is a generative visualization that arranges overlapping circles into a dense, radial pattern centered on the screen, with each circle colored by a gradient from yellow to brown. The example uses React and SVG, with a `Circles` component rendering individual `<circle>` elements. The code calculates circle positions using cosine and sine functions over an array of indices and multiples of 50 pixels, while a radial gradient defined in `<defs>` and a drop shadow filter add visual depth. Fifty circles are drawn for each of fifty angles, creating a vibrant, flower-like composition.

NNita

78% match

Loading thumbnail…

SVG Me

This example displays two concentric circles rendered directly inside an HTML page using pure SVG. A large blue circle with an orange stroke and a smaller red circle with a teal stroke are positioned together to create a simple layered composition. The code relies on inline SVG markup with standard attributes such as `cx`, `cy`, `r`, and `stroke-width`, avoiding any JavaScript or external libraries. The shape definitions are written directly in the `index.html` file, demonstrating how vector graphics can be embedded without additional frameworks.

Wwgloss

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the basics of SVG rendering, showing three concentric circles that create a target-like visual using different colors and radii. The scene is constructed directly in an HTML page using the SVG element with a fixed canvas size of 960 by 480 pixels, while specific circle elements define their positions and fill colors. The visualization relies purely on static SVG markup without external libraries or JavaScript, illustrating fundamental vector graphics capabilities.

TTom Ellis

78% match