Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Oct 28, 2022

Created on Oct 28, 2022

This example demonstrates the use of raw SVG shapes within an HTML page, displaying circles and rectangles at specific coordinates. The code uses native SVG elements like `<circle>` and `<rect>` positioned on a 960×960 canvas, with some shapes colored via `fill` attributes while others remain default black. It applies basic CSS styling through an external stylesheet, including a `.highlighted` class and page-level body margins. No JavaScript libraries are used; the visualization relies solely on static SVG markup and Cascading Style Sheets for rendering.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and HTML

This example uses raw SVG elements to display basic shapes, including two circles and two rectangles, on an HTML page. The shapes are styled with inline SVG attributes, with two shapes receiving custom fill colors—a purple circle and a pink rectangle—while the others use default black fills. The code directly employs SVG’s `<circle>` and `<rect>` elements within an `<svg>` container, rendered via standard HTML markup, with a linked stylesheet that resets the body margin and defines a `.highlighted` class. No JavaScript libraries are used; rendering relies purely on built-in SVG support in the browser.

SSUPERMAN79355

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered directly in HTML, featuring two circles and two rectangles with varying positions and colors, including a red circle and a green square. The visualization uses plain SVG markup within index.html, styled minimally through CSS in styles.css, which sets the page margin to zero and hides overflow while applying a red highlight class. No external JavaScript libraries are used; the code relies solely on native SVG elements and CSS properties to construct the simple geometric composition.

Mmkdeeps01

92% match

Loading thumbnail…

Shapes with svg and css

This example demonstrates basic shape drawing with SVG and CSS, showing how circles, rectangles, lines, and paths are rendered and styled on an HTML page. It illustrates the differences between default black fill and explicit fill attributes, including solid colors and RGB values, while also grouping shapes with the `<g>` element to apply shared styling like fill and stroke to multiple objects. The visualization uses raw SVG markup within an HTML document, with a linked stylesheet defining page-level layout. The code showcases CSS margin and overflow properties, though the `.highlighted` class remains unused in the current markup.

Hhaasamj

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic geometric shapes, including circles, rectangles, a line, and a path, rendered within a 960 by 500 pixel SVG canvas. The shapes demonstrate various SVG presentation attributes, such as fill colors, stroke colors, and stroke widths, applied both directly and through the `<g>` grouping element. The visualization uses the SVG rendering API with an HTML page and a linked CSS stylesheet, where CSS is only used for global body styling and a non-applied `.highlighted` class. It does not incorporate any JavaScript libraries or external data.

AAlessan123

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a pair of basic SVG shapes—a red circle and a red-filled rectangle—positioned on a 960x500 canvas. The page renders these geometric primitives through the inline SVG markup within the HTML body, while a linked stylesheet (`styles.css`) applies global resets like zero margins and hidden overflow. The code uses the native SVG elements `circle` and `rect` with their `r`, `cx`, `cy`, `x`, `y`, `width`, `height`, and `fill` attributes, and includes a CSS class named `.highlighted` that colors text red. No JavaScript or external charting libraries are involved; the visualization relies solely on static SVG and CSS presentation.

UUGarCil

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a simple set of SVG shapes—a circle and a rectangle—rendered inside a fixed 960×500 viewport. The page uses inline SVG elements and CSS rules for styling, with the `highlighted` class available to color shapes red. The SVG is embedded directly in the HTML, and the stylesheet handles page margins and overflow. The visualization demonstrates basic geometric shape placement and CSS integration without additional JavaScript libraries or data sources.

Mmkdeeps01

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example uses SVG elements and CSS to draw basic shapes on a web page. It shows a circle, a rectangle, a line, and a path, all placed directly within an SVG element with a fixed width and height. The rendering approach uses raw SVG markup without any JavaScript libraries like D3, relying on presentational attributes such as `stroke`, `stroke-width`, and `fill` to style the shapes. The CSS file sets the body margin and hides overflow, while a `.highlighted` class defines a red color rule that is not applied in the current markup.

GGulrez

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape creation and styling using raw SVG elements (circle and rect) combined with CSS. The visualization renders two rows of shapes inside a single SVG container, with the first row showing default black shapes and the second row introducing fill colors and CSS class-based highlighting. The code uses inline SVG attributes like cx, cy, r, width, height, x, and y, along with a g transform to reposition the entire second group. A linked stylesheet applies global resets and a red text highlight class, though no data is loaded—the shapes are hardcoded directly in the HTML.

EEugenia Kim

91% match