Skip to main content
100%

Shapes with SVG

✓ Published0🌍 Public
Mmalmeister
Last edited May 31, 2020
Created on May 31, 2020
Forked from HTML Starter

This example shows a simple composition of two geometric shapes—a circle and a rectangle—positioned on an SVG canvas. Rendered in a web browser, the circle and rectangle are drawn without any data-driven mapping, simply using static coordinates and dimensions. The visualization uses raw SVG markup directly within the HTML page, with the circle defined by its center point and radius, and the rectangle by its width, height, and position. Styling is minimal, with only the rectangle assigned a fill color of green, while the circle takes on the default black. The page uses no external charting library, relying on the browser’s intrinsic SVG support via the `svg` element. The accompanying CSS sets a large font size and centered text alignment, though it does not affect the visual layout of the shapes themselves.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes