test

100%

✓ Published0🌍 Public

Last edited Nov 15, 2023

Created on Nov 7, 2023

This example shows two overlapping black-outlined circles on an empty white field, creating a simple Venn-like intersection. The shapes are drawn using raw SVG `<circle>` elements within an HTML5 document, with no external JavaScript or styling libraries. Each circle has a fixed radius of 50 pixels and a stroke-only fill, positioned at distinct coordinates to demonstrate basic geometric overlap in a static, hand-coded visualization. The rendering is handled entirely by the browser's native SVG support, with no data source or interactive behavior involved.

AI-generated description

test anything

MIT Licensed

Similar vizzes

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

83% match

Loading thumbnail…

Untitled

This example shows two overlapping circles rendered as SVG elements on a blank HTML page. The first circle is positioned at coordinates (50, 50) with a radius of 50 and uses the default black fill, while the second circle is placed at (100, 50) with the same radius but a red fill, creating a simple visual comparison of offset shapes. The code directly embeds the SVG markup inside the HTML body without any JavaScript or CSS styling, relying solely on the browser’s native SVG rendering.

KKazuma Sadakane

82% match

Loading thumbnail…

svg fundamental

This example demonstrates basic SVG rendering with overlapping circles of varying sizes and colors. It shows how SVG elements are layered, with later circles drawn on top of earlier ones, while the fill attribute controls each shape’s color. The page uses raw SVG markup embedded directly in HTML, with no external libraries or JavaScript. The code includes several circles positioned at different coordinates, with radii ranging from small to large, illustrating how SVG handles geometry and stacking order. The rendering approach relies entirely on the browser’s native SVG support.

JJAS4P

80% match

Loading thumbnail…

Hello HTML

This example displays two black-outlined circles and a smaller pair of yellow circles on a blank 960 by 500 SVG canvas. The page uses raw HTML and inline CSS to remove default body margins and hide overflow. The circles are drawn using the SVG `circle` element, with coordinates and radius defined directly in the markup. No external libraries are used; the visualization relies on native browser rendering of the SVG.

Ssommerh

80% match

Loading thumbnail…

Hello HTML

This example displays a simple static composition of three black-outlined circles on a yellow background, with a large central circle flanked by two smaller ones. The visualization is built using raw SVG elements embedded directly in an HTML page, with no external JavaScript libraries. It demonstrates basic SVG rendering by setting explicit coordinates, radii, fill colors, and stroke properties on circle elements within a fixed 960 by 500 viewport. The page uses minimal CSS to remove margins and hide overflow, focusing entirely on the vector shapes.

Ppurritola

80% 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

80% match

Loading thumbnail…

test

This example presents a static composition of two SVG circles on a 960 by 500 canvas. A large yellow circle with a thick black outline is centered, while a smaller black circle is positioned to its left, creating a simple contrasting visual. The visualization is built using raw HTML, CSS, and inline SVG, with no external libraries or JavaScript logic. The SVG elements are declared directly within the HTML structure, relying on the browser's built-in vector graphics rendering.

BBibek-Bhattarai

79% 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

79% match