100%

Fork of Fork of SVG Ends

✓ Published0🌍 Public

Last edited Dec 29, 2025

Created on Dec 27, 2025

A 1000x1000 canvas displays a minimalist geometric composition: a solid green circle in the top-left corner and a larger solid red circle at the center, both rendered against a plain white background. The drawing uses the Canvas API’s `beginPath` and `arc` methods, with `fillStyle` set to the respective colors before each `fill` call. The canvas element is initialized to 1000 by 1000 pixels, and the entire scene is redrawn on a black-bordered canvas within a lavender page background.

AI-generated description

Blank Canvas

A 1000x1000 blank canvas ready for drawing.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG Fundamentals

This fork of SVG Fundamentals demonstrates basic SVG shape rendering in a 500 by 500 pixel canvas. It draws two overlapping red and green circles, a navy diagonal line, a complex path using cubic Bézier-like curve commands, and a second black path that combines absolute and relative line-drawing syntax. The shapes are specified directly in the markup without external libraries, using standard SVG elements like `<circle>`, `<line>`, and `<path>`. The page hides body margins and overflow, presenting the vector graphic as a standalone composition.

DDivyam Gupta

83% match

Loading thumbnail…

Fork of SVG Ends

This example presents a static collection of primitive SVG shapes—circles, rectangles, and polygons—arranged in a grid-like composition on a 960×1500 canvas. It demonstrates fundamental SVG markup and styling using inline attributes like `fill`, `stroke`, `stroke-width`, and `transform` (specifically `translate` and `scale`). The code uses plain SVG syntax and defines figures ranging from simple color swatches to a repeated star-like polygon, showcasing basic coordinate placement and color values (hex, named, and rgba) without any JavaScript libraries or animation.

Jjustinenns@hotmail.com

83% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG rendering primitives by combining overlapping circles, lines, and custom paths on a 960 by 500 canvas. The graphic pairs a small green circle inside a larger red one to illustrate fill and layering, then shows a thick navy stroke along a coordinate path and a black open path with explicit line segments. The operations run directly through the `svg` element in an HTML document, using inline `circle`, `line`, and `path` tags. The drawing relies entirely on static SVG markup, with no scripting or external libraries, and reflects a simple exercise in vector graphics construction.

Cchristian_musiol@arcor.de

82% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates a static SVG canvas containing two concentric circles, where a red circle (radius 50) is layered beneath a smaller green circle (radius 30), with global CSS applying a 50% opacity and blue fill to all circle elements. The page also includes a green div that animates its width over two seconds and an SVG element with a red background and a five-second height transition. The rendering relies directly on inline SVG markup and CSS transitions, with no external JavaScript libraries involved.

NNita

81% match

Loading thumbnail…

Fork of Fork of SVG fundamentals

This example demonstrates fundamental SVG shapes, including circles, a rectangle, a line, and a path, arranged on a 960-by-500 canvas. The circles vary in radius and fill color, while the rectangle features a yellow fill with a navy stroke of specified width. The line and path illustrate basic coordinate-based drawing. The rendering uses raw SVG markup directly in an HTML document, with no external libraries or JavaScript, showcasing static vector graphics built from native SVG elements.

NNita

81% match

Loading thumbnail…

Fork of SVG Fundamentals

This fork demonstrates fundamental SVG shapes and attributes in a raw, unstyled 960x500 canvas. The code draws overlapping circles with explicit `cx`, `cy`, `r`, and `fill` properties, a thick navy `line`, a complex closed `path` with cubic Bézier commands, and another open `path` with a black stroke. The markup also includes an inert `<rec>` element—an intentional typo—and an empty commented-out `<rect>`. The example relies entirely on native SVG elements, using no external libraries, and renders directly in the browser via inline SVG.

Ddora.frauscher@gmx.at

81% match

Loading thumbnail…

Fork of SVG Fundamentals

A fork of the SVG Fundamentals demonstration shows a series of basic vector shapes drawn on a fixed 960-by-500 canvas. Overlapping red and green circles illustrate layering, while a yellow rectangle with a navy stroke and a thick black line and path demonstrate stroke styling and relative path commands. The static example uses only raw SVG markup and inline HTML styling, with no external JavaScript libraries or interaction.

Ddannockr

81% match

Loading thumbnail…

Fork of SVG Fundamentals

This example shows three basic geometric shapes rendered in a single SVG canvas: a red circle, a green circle, and a yellow rectangle with a blue outlined border. The visualization demonstrates fundamental SVG element usage, including circle and rect tags with explicit fill and stroke attributes, and manual x, y, width, height, and radius coordinates. All shapes are hard-coded in HTML within a 960×500 viewport, utilizing the native SVG API without external libraries or data processing, serving as a minimal static demonstration of vector graphics markup.

Sshaminda85ebag@gmail.com

81% match