Skip to main content
SimilarExport ZIP
100%

Fork of Overlapping Circles

✓ Published0🌍 Public
Iimayankbisht
Last edited Sep 29, 2021
Created on Sep 28, 2021

This example layers a CSS-clipped SVG circle with semi-transparent HTML text to create a hybrid visualization. The code uses React to render an SVG viewBox containing a clipPath element filled with randomly positioned text elements via JSX math, then applies the clip path to a red circle using `clip-path` and `xlink:href`. The embedded D3 script generates a word cloud with `d3.layout.cloud()`, positioning words like "Hello" and "Coding" across two overlapping black-stroked circles. While the React portion fixes the text positions randomly, the D3 part animates word placement through the cloud layout algorithm.

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 Hello HTML

This example renders two overlapping SVG circles, a yellow outer ring with a black stroke and a smaller black inner circle, positioned at the same center. The page also renders a React component that displays the text "H1" inside a root div. The visualization uses React 16.7.0 for component rendering, D3 v7.1.1 for SVG manipulation, and hardcoded circle attributes defined in CSS classes. The SVG output is static, with no interactivity or data binding beyond the fixed dimensions and styles.

GGaurav Dwivedi
81% match
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
81% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates three SVG circles arranged horizontally in red, black, and blue, styled with CSS for a large centered text message. The visualization uses plain SVG elements and CSS styling in an HTML page. The circles are drawn with specific cx, cy, and r attributes, showcasing basic geometric shapes rendered in the browser. The code relies on vanilla HTML, CSS, and JavaScript without any external libraries, serving as a minimal interactive template for building visualizations.

EEjenavi16
80% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static SVG composition of overlapping circles and a line, arranged in a simple geometric pattern. The graphic shows concentric rings in green, yellow, blue, and red at the left, a black circle with grey and yellow inner circles on the right, and a horizontal red line across the top. The code uses raw SVG elements—`circle` and `line`—with inline attributes for positioning, sizing, and colors, all rendered directly within an HTML document without any JavaScript libraries.

Ssantoshmitra-05
79% 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
79% match
Loading thumbnail…

Fork of HTML Starter

This example shows three overlapping circles and a diagonal red line inside an SVG canvas, demonstrating basic vector shapes with CSS styling. The circles use a pale gold fill (`#f0dfad`) with black outlines, while the line is drawn with an inline stroke style. The page relies on plain SVG elements—`circle` and `line`—with width/height attributes set directly on the `<svg>` tag, and uses no JavaScript libraries or data sources. It renders as a static, illustrative composition in the browser.

Qquan281999
79% match
Loading thumbnail…

Fork of Fork of Fork of Random circle shapes with react July 4,2022 -2

This example shows a dense field of randomly positioned, semi-transparent rectangles and circles rendered with React and SVG, each with randomized stroke widths, opacity, and dynamically generated RGB colors. The layout is produced by a fixed array of 200 values calculated from a simple arithmetic formula, mapped through React components to create the visual elements. Using D3 v7 only to select the body and append a base SVG, the code primarily relies on React’s `ReactDOM.render` and custom components like `My_circle` to generate the shapes, with no interactive or animated behavior.

Qqwxyyigesm
79% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates two circles with large radii, each containing a smaller inner circle, positioned side by side on a blank SVG canvas. The outer circles use white fills with thick black strokes, while the inner circles have no explicit fill or stroke, rendering them transparent. The visualization is built using raw SVG elements defined directly in the HTML markup, with CSS applied to remove page margins and hide overflow. It relies on the browser’s native SVG rendering, with no additional JavaScript libraries or data sources involved. The composition creates a simple geometric, target-like pattern.

Ddplaskota@hotmail.com
79% match