Circling Circles

100%

Circling Circles

✓ Published1🌍 Public

Last edited Jul 9, 2022

Created on Jul 8, 2022

A static SVG scene shows a large green circle, centered on a white background, whose thick black outline is punctuated by four smaller blue circles positioned at the cardinal points. Each small circle has its own yellow stroke, and the arrangement suggests a minimalist orbital motif. Built with React, the markup is generated via JSX, while D3 v5 is imported for its `select` API, though the visualization itself relies purely on SVG circle elements and window dimensions for sizing.

AI-generated description

Testing my ability to work with JS, D3 and create circling circle.

Begin by creating the template in svg/html
Transfer them to JS using react framework

MIT Licensed

Similar vizzes

Loading thumbnail…

Refactoring Circles

A large green circle fills the viewport, surrounded by four smaller blue circles positioned at its cardinal points, each with yellow strokes. A thin black arc curves inside the green circle, adding a subtle geometric accent. The visualization is rendered as SVG through React components, using D3’s `arc()` generator to define the curved path. All elements are drawn in a static, non-interactive layout, with dimensions computed from the browser window size.

KKamalabot

89% match

Loading thumbnail…

Fork of Circles with D3

This example demonstrates a static SVG scene of a large yellow circle with a black outline and two smaller black-bordered circles positioned inside it, resembling a face. The visualization is built using React 18 and D3 v7, rendering all shapes through an SVG component in a `react-dom` root. The code defines circles with explicit `r`, `cx`, `cy`, `fill`, and `stroke` attributes, while the page layout uses an embedded stylesheet to remove margins and hide overflow. The example serves as a creative foundation, inviting modifications like thematic styling for holidays.

Aaltugbozyaka@gmail.com

87% match

Loading thumbnail…

Circle

The visualization shows a single large yellow circle with a thick black stroke, centered on a 960-by-500 SVG canvas. Rendered via React, it uses the `Circle` component to return an SVG `<circle>` element with fixed `cx`, `cy`, and `r` attributes. The code leverages React 17 and ReactDOM to mount the SVG into the DOM, with the circle’s fill and stroke properties defined directly in JSX. No data source is involved; the geometry is purely hardcoded.

33ssalunke

84% match

Loading thumbnail…

Circles

A set of 40 concentric circles radiates from the center of an SVG canvas, each stroke drawn in solid red with 50% opacity and a 10-pixel width. The circles grow from a minimum radius of 20 to a maximum of 80, incrementing linearly, while the outermost circle reaches a radius of 300. Rendered using React’s `ReactDOM.render` into a `div` root, the visualization maps an array of radii to `<circle>` elements, with the SVG dimensions fixed at 960 by 500 pixels. The code explicitly computes radius values in a loop, though the final array contains a single undefined element.

NNita

84% match

Loading thumbnail…

Circles

A single grey SVG canvas displays one yellow circle centered within a red-bordered frame. The circle is drawn using the SVG `<circle>` element with a green stroke and a radius of 200 pixels, positioned relative to the canvas width and height. The example demonstrates basic SVG shape rendering in a plain HTML page using CSS for styling and inline SVG markup, with no JavaScript libraries or frameworks involved.

AAlim Bolar

84% match

Loading thumbnail…

Circles Pack

This visualization shows a large grid of concentric circles arranged in a repeating pattern across an SVG canvas. The circles are drawn with green outlines, a stroke width of 8, and 0.8 opacity, creating a dense, mosaic-like texture. The code uses React to render the SVG elements, with a custom `Circles` component that wraps the native SVG `<circle>` element. It generates 20 distinct radii and maps them over a 5×5 grid of positions, scaling the entire group by 0.4. ReactDOM mounts the tree to the DOM, and the page uses the UMD production builds of React 16.10.0.

NNita

83% match

Loading thumbnail…

Untitled

A single large brown circle serves as the central figure, flanked by two smaller silver circles. The SVG markup directly defines each circle’s position, radius, and stroke, using fixed numeric attributes such as `cx="480"`, `r="200"`, and `stroke-width="10"`. The React framework is not utilized in the rendering logic; instead, the visualization is built with plain SVG elements inside an HTML page, relying solely on CSS for margin and overflow styling. No additional JavaScript libraries or data sources are involved, as the example demonstrates static, hardcoded geometry.

SSimonYapp

83% match

Loading thumbnail…

DataViz

This example shows a static SVG scene with a large yellow circle outlined in black, centered on a 960 by 500 canvas, and a smaller unfilled circle overlapping it to the left. The HTML page uses inline CSS to remove body margins and hide overflow, while the SVG markup defines the shapes directly within the document. The circles are constructed using standard SVG `<circle>` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. No JavaScript or React logic is present; the visualization relies entirely on static SVG rendering.

Mmacl23

83% match