Skip to main content
SimilarExport ZIP
100%

Shapes With SVG

✓ Published0🌍 Public
SSaket Anand
Last edited Mar 20, 2020
Created on Mar 20, 2020
Forked from HTML Cars Report

This example displays two basic SVG shapes—a circle and a rectangle—on a 960×500 canvas. The circle is positioned at coordinates (150,200) with a radius of 100, while the rectangle has a width and height of 50, placed at (200,250). The code uses raw SVG elements within an HTML document, with React as the underlying framework and a linked stylesheet defining the page layout. The visualization demonstrates fundamental SVG rendering without additional data or interactive behavior.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example displays two basic SVG shapes—a circle and a rectangle—on a fixed 960 by 500 canvas. The circle uses default styling, while the rectangle is explicitly filled with red. The code directly embeds SVG elements in HTML and applies a small external stylesheet to remove page margins and hide scrollbars. Rendering relies solely on native SVG markup within the browser, without any JavaScript libraries, and the stylesheet also defines a `.highlighted` class that is not used by the shapes.

Aargonaeut
92% match
Loading thumbnail…

Shapes with SVG

This example demonstrates how to render basic SVG shapes—specifically a circle—within a React application. The visualization displays a single circle element inside a 960x500 pixel SVG canvas. The code uses React's HTML and CSS rendering approach, with a minimal setup that loads an external stylesheet. The stylesheet applies a monospace font and increases the base font size to 2em, affecting any text content. The implementation relies on raw SVG markup directly in the React component rather than a dedicated charting library, showcasing the simplicity of embedding vector graphics in a web page.

Ddktaylor916
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays two basic SVG shapes—a circle and a rectangle—positioned on a 960 by 500 canvas. The page uses plain SVG markup within an HTML file, styled by an external CSS stylesheet that resets the body margins and defines a `.highlighted` class (though not applied to the shapes). The rendering relies on native SVG elements like `<circle>` and `<rect>`, with no JavaScript or React interaction visible in the code.

PPrerna Mishra
92% match
Loading thumbnail…

shapes with css and svg

This example demonstrates two basic geometric shapes—a circle and a rectangle—rendered within an SVG canvas. The circle is centered at (250,250) with a red fill and black stroke, while the rectangle uses a green fill with a blue stroke and is positioned to the right. The shapes are defined directly inline in the HTML using SVG elements, with styling applied through SVG presentation attributes such as `fill`, `stroke`, and `stroke-width`. No external libraries or JavaScript are used; the visualization relies solely on native SVG markup within a static HTML page.

Aaditya-ux27
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows two basic geometric shapes—a circle and a rectangle—drawn on an SVG canvas. The shapes are styled directly with SVG presentation attributes, including fill colors, pink outlines, and a stroke width of ten pixels. The visualization is implemented with a minimal HTML page that embeds SVG markup without any scripting or external libraries. All rendering is handled by the browser’s native SVG support, with no JavaScript or CSS rules applied beyond the inline attributes.

NNJANGHU
92% match
Loading thumbnail…

Shapes with SVG

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.

Mmalmeister
91% match
Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—rendered on a 960-by-500 canvas. The composition uses a scaling transformation and a group with translation, fill, and stroke settings to show how attributes like fill, stroke-width, and stroke-linejoin alter appearance. The shapes are created directly in the markup with coordinates and styling, and the page is styled using a minimal CSS file, all within a React starter project.

Uujjwalgarad
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates two fundamental SVG shapes—a circle and a rectangle—styled purely with CSS. The SVG canvas is fixed at 1000 by 600 pixels, with the circle positioned at (60,60) and the rectangle at (150,10). The stylesheet applies a maroon fill to the circle and gray to the rectangle, while the body margin is reset to zero and overflow hidden. The implementation uses raw SVG elements directly in HTML, with CSS selectors targeting the `<circle>` and `<rect>` tags for styling.

RRaghavKakkar
91% match