Skip to main content
SimilarExport ZIP
100%

tesT 1

✓ Published1🌍 Public
NNita
Last edited Jan 2, 2024
Created on Jan 2, 2024

This example demonstrates the SVG fundamentals of creating and styling shapes. It first renders a single static red circle, then uses a JavaScript loop to generate fifty additional circles with random positions, radii, and colors. The code employs the SVG `circle` element and the `createElementNS` API from the DOM to dynamically append shapes to the SVG canvas. Rendering occurs in the browser via a 1000 by 1000 pixel SVG viewport, with data and attributes generated procedurally using `Math.random`.

AI-generated description

Demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG TEST

This example demonstrates the basic building blocks of SVG graphics on a plain HTML page. It shows how to create and style two circles and a rectangle using inline SVG elements, with one circle left unfilled and the other filled red. The rectangle uses a blue stroke with a width of 10 and no fill. The code exercises fundamental SVG attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` within a fixed 200 by 200 coordinate system. No external libraries or data are involved; the visualization relies entirely on hand-written markup.

Bbtkg
80% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG by rendering a single red circle on a blank canvas. It shows how basic shape elements, such as `<circle>`, are positioned using `cx` and `cy` coordinates and styled with the `fill` attribute. The code uses raw SVG within an HTML page, setting a fixed viewport of 960 by 500 pixels. The rendering approach is straightforward declarative markup, with no JavaScript or external libraries involved.

TThegreatest1123
79% match
Loading thumbnail…

SVG Fundamentals

This example introduces SVG fundamentals by drawing two circles on a 960-by-500 canvas. The first circle, centered at (50, 50) with radius 100, uses default styling, while the second, at (200, 300) with radius 200, is filled red. It demonstrates basic SVG shape creation with the `<circle>` element, setting `cx`, `cy`, `r`, and `fill` attributes. Rendered directly in the browser via inline SVG, the example shows how static vector graphics are constructed without any external libraries or data sources.

JJeremyNgDX
79% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape elements in a web page, using static circles and a rectangle to illustrate basic attributes. The code uses plain HTML and JavaScript within a minimal setup, with an SVG canvas of 900 by 500 pixels. It shows a default black circle, a red-filled circle at adjusted coordinates, and a green-stroked rectangle with a thick stroke width of 20. The example highlights how CSS and JavaScript interact with inline SVG markup.

Rrobdavidson01
79% match
Loading thumbnail…

Shapes with SVG

This example demonstrates how to build and render basic SVG shapes, showing a large red circle centered on a 960x500 canvas. It serves as a tutorial on using JavaScript objects, arrays, and modules, with the HTML embedding a static SVG element while a linked `bundle.js` (generated by Rollup) manages the dynamic behavior. The page includes a large `<pre>` element for displaying messages and uses minimal styling via `styles.css`, which hides overflow. The code relies on standard SVG circle attributes (`cx`, `cy`, `r`, `fill`) and a plain JavaScript setup without external libraries.

Nnecat1
79% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape primitives, combining circles, a rectangle, a line, and a path within a fixed 950×500 canvas. The SVG rendering shows layered elements, including a large green circle with a smaller red center point, a red rectangle with a navy border, and arbitrary geometric paths. The code uses native SVG APIs directly in the HTML, with attributes for positioning, fills, strokes, and stroke widths, illustrating fundamental vector graphics without external libraries.

Nnitika1234567
79% match
Loading thumbnail…

SVG starter

This example shows six circles positioned at scattered coordinates across an SVG canvas, demonstrating basic static shapes in a 960-by-500 pixel space. The circles vary in placement but share a uniform radius, creating a simple dot pattern with no interaction or animation. The code uses raw SVG elements directly in an HTML document, without any JavaScript libraries or data-binding. It relies on hard-coded circle coordinates and the standard SVG rendering pipeline, serving as a minimal starting point for more complex visualizations.

UUnknownLearn
78% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering by drawing two circles on a blank canvas. The first circle uses the default black fill, while the second is explicitly colored red. The code relies on native SVG elements—`<circle>` with `cx`, `cy`, and `r` attributes—inside an inline `<svg>` tag. The rendering approach follows the SVG specification directly, requiring no external libraries or JavaScript, and shows how static vector graphics are defined purely through markup.

Mmohsinakhtaralam
78% match