Skip to main content
SimilarExport ZIP
100%

Overlapping Circles

✓ Published1🌍 Public
Jjjacobatandover
Last edited Jul 4, 2021
Created on Jul 3, 2021

Two overlapping yellow circles with black outlines form a simple abstract composition. The example demonstrates using React with JSX to generate SVG circles, replacing static HTML markup with dynamic JavaScript calculations for positioning and sizing. The code defines constants for dimensions, offsets, and stroke width, then renders three circles—two offset horizontally and one centered—using ReactDOM to mount the component into the DOM. This illustrates how React’s declarative approach enables reusable, parameterized SVG elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

Half way towards a smiley face -- we used CSS to make the margins and the colors. We used SVG to make the circles. Feeling frustrated that we couldn't use math to define the DOM structure and use JSX to write HTML in JS and math from JS

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hello HTML

This example shows two overlapping circles rendered as a static SVG scene, one yellow on the left and one red on the right, within a 960x500 viewport. It demonstrates a minimal setup for combining React with SVG markup, loading React and ReactDOM via CDN scripts and logging the React object to the console. The circles inherit default SVG styling, with the yellow circle having a black stroke, while the red circle lacks a stroke due to a typo in the `stroke-width` attribute. No dynamic data or interactivity is present; the visualization is purely declarative SVG structure.

JJosepAnSabate
83% match
Loading thumbnail…

Hello HTML!

This example shows two overlapping SVG circles centered on a 960×500 canvas, creating a target-like visual with a yellow outer ring and a red inner disc, each outlined in black. The circles are rendered using raw SVG elements defined directly in an HTML file, with styling applied through embedded CSS that sets the page margin to zero and hides overflow. The visualization relies solely on static SVG markup with explicit `cx`, `cy`, and `r` attributes, demonstrating fundamental vector graphics without any JavaScript or external libraries.

Bbeebeckzzz
82% match
Loading thumbnail…

Concentric circles

This example displays a field of overlapping concentric circles, arranged radially around a central point. The circles vary in size, color, and position, creating a textured, abstract composition. Using React and SVG, the code generates 50 sets of circles, with each circle's radius and fill color calculated from randomized values. The positions are derived from trigonometric functions, and the entire visualization is rendered through the `ReactDOM.render` method into an SVG container.

NNita
82% match
Loading thumbnail…

Untitled

A yellow circle with a thick black border fills most of an SVG canvas, while a smaller unfilled circle sits in the upper-left region, creating a simple composition of overlapping geometric shapes. The example demonstrates basic SVG rendering through React, using native `circle` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. A minimal HTML page with inline CSS and JavaScript serves as the host, showcasing how to embed static SVG directly in a React project without additional data or interaction.

SSumz-K
82% match
Loading thumbnail…

SVG test

This example demonstrates a minimal SVG rendering of two overlapping circles on a blank HTML page. It shows how basic vector shapes can be layered, with the first circle drawn in black and the second yellow circle placed directly on top. The page uses plain HTML and CSS, with no JavaScript or external libraries, relying solely on the browser’s native SVG support. The circles share the same center and radius, producing a solid yellow disc that completely obscures the underlying black shape, as defined in the inline markup of the index.html file.

Yyangioe
82% match
Loading thumbnail…

JH2

This example displays a simple, static SVG graphic of a yellow circle with a black outline, accompanied by two smaller unfilled circles positioned symmetrically above it. The visualization demonstrates basic SVG shape rendering, using `<circle>` elements with attributes for center coordinates, radius, fill, and stroke. The code imports React and ReactDOM from CDN via `unpkg`, though the rendering is handled directly through handwritten SVG in the HTML body rather than through React's component system. The page layout uses CSS to remove margins and hide overflow, creating a clean canvas for the shapes.

JJosh-Hawley
82% match
Loading thumbnail…

Welcome to HTML

This example displays a simple SVG composition featuring two overlapping circles, creating a distinct target-like visual on a blank canvas. The larger yellow circle is outlined with a thick black stroke, while a smaller unfilled circle sits at its center, both positioned at the midpoint of the 960x500 viewport. The code demonstrates fundamental HTML structure with embedded CSS for page styling and inline SVG elements, using the circle tag with attributes for positioning, radius, fill, and stroke. It serves as a minimal introduction to web-based graphics rendering.

AACS264
82% match
Loading thumbnail…

SVG Fundamentals

This example shows two overlapping circles rendered as a static SVG graphic. It demonstrates the fundamentals of SVG markup, where each circle is defined by its center coordinates and radius. The visualization uses a single SVG element with hardcoded circle elements, appearing to leverage basic HTML and JavaScript capabilities. The code employs a minimal React setup, though the rendering itself relies on the browser's native SVG support, as seen in the two adjacent circles on a 950 by 500 canvas.

CCreg925
82% match