Skip to main content
SimilarExport ZIP
100%

Fork

✓ Published0🌍 Public
OOverpitch
Last edited Jan 6, 2024
Created on Jan 6, 2024

This example demonstrates fundamental SVG shape drawing within a static 600×800 pixel canvas. It shows a rectangle outline, two circles (one filled red), horizontal and vertical lines, and a purple rectangular path, all positioned relative to the viewport. The code uses plain SVG markup as embedded in HTML, with no external JavaScript libraries or data binding. Styling is applied directly through attributes like `stroke`, `stroke-width`, and `fill`, illustrating basic vector graphics construction without animation or interaction.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork

A large circle is rendered near the top-left corner of an SVG canvas, with a thick red diagonal line segment drawn from inside the circle outward. The circle has no fill and is not clipped, so its outline and the line are clearly visible against the blank page. The code uses React with SVG elements directly in the HTML, specifically the `<circle>` and `<path>` tags, and sets the line’s stroke and stroke-width as attributes. The rendering is static with no interaction or data-driven behavior.

YYZY-Jaeger
90% match
Loading thumbnail…

Fork test

This example displays a set of static geometric shapes composed of paths and rectangles rendered as SVG. The visualization uses plain HTML, CSS, and JavaScript, with CSS transitions applied to rectangles that change color and stroke width on hover. The layout shows a large outlined container with smaller filled blocks in orange, green, gray, and blue, using SVG elements like `<path>` and `<rect>` directly in the markup. It demonstrates basic SVG styling and interactivity without any external data or charting libraries.

Zzaioris
90% match
Loading thumbnail…

Fork_of_Fork_of_HTML_Starter

This example displays a set of basic SVG shapes—a circle, a red circle, a green rectangle, a navy line, and a blue path—arranged on a 1000×1000 canvas. The code uses raw HTML and inline SVG elements, including `circle`, `rect`, `line`, and `path`, without any JavaScript libraries. It demonstrates the foundational syntax for static vector graphics, with shapes positioned via absolute coordinates and styled using attributes like `fill` and `stroke`. The rendering is entirely declarative, showing how primitive shapes compose a simple composition directly in the browser.

Aag17@tutanota.de
90% match
Loading thumbnail…

fork

This example demonstrates the basic building blocks of SVG graphics using a static, hand-coded scene. It shows how to create primitive shapes—circles, a rectangle, and a line—within an SVG canvas, distinguishing between default black fills, explicit red fills, and styled strokes with custom colors and widths. The code uses the raw SVG API directly in an HTML document, with attributes like `cx`, `cy`, `r`, `x`, `y`, `stroke`, and `stroke-width` to define geometry and presentation. The scene serves as a minimal, non-interactive visualization, illustrating the foundational syntax for plotting points and drawing simple vector shapes.

Vvelitetik@gmail.com
88% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes placed on a large 2000-by-2000 canvas. It shows how circles and lines are rendered with explicit attributes for position, size, fill color, and stroke properties. The code uses raw SVG elements within a plain HTML file, with no external JavaScript libraries. Rendering relies on the browser’s native SVG support, applying hard-coded values such as yellow and grey fills, black strokes, and a red diagonal line. It serves as a minimal, static illustration of basic vector graphics syntax.

Ggeneralsuboncomp@proton.me
88% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes and path commands on a 500 by 500 canvas. The code draws circles, rectangles, and lines with fixed pixel coordinates, along with several paths that use the `M` (move to) and `L` (line to) commands. A simple rectangle outlines the drawing area with vertical and horizontal crosshairs extending beyond its bounds. The visualization is static, using pure SVG markup without any JavaScript libraries or data sources.

BBen M
88% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and coordinates within a static 800x600 viewport. It shows rectangles, circles, lines, and a custom path, some with explicit stroke and fill styling. The visualization is built using raw SVG markup, with elements like `<rect>`, `<circle>`, `<line>`, and `<path>` placed directly in the `index.html` file. An open rectangle outlines the drawing area, while overlapping circles and crossed navy lines illustrate basic positioning and layering. The illustration focuses purely on SVG's native rendering capabilities without any additional libraries.

Mmecklybver@gmail.com
87% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and coordinates within a static 800x600 viewport. It shows rectangles, circles, lines, and a custom path, some with explicit stroke and fill styling. The visualization is built using raw SVG markup, with elements like `<rect>`, `<circle>`, `<line>`, and `<path>` placed directly in the `index.html` file. An open rectangle outlines the drawing area, while overlapping circles and crossed navy lines illustrate basic positioning and layering. The illustration focuses purely on SVG's native rendering capabilities without any additional libraries.

Mmecklybver@gmail.com
87% match