Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Oct 31, 2018

Created on Oct 31, 2018

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.

AI-generated description

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as scalable vector graphics: a red circle, a green rect, a thick black line, and a polygonal path composed of straight segments. The shapes are drawn directly in an SVG element within the HTML, with styling applied through inline attributes such as `fill`, `stroke`, and `stroke-width`. The accompanying CSS sets the page margins and overflow, while all visual properties for the shapes are defined using native SVG presentation attributes rather than a JavaScript library.

Mmeghagoyal17

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. The shapes are grouped and scaled using SVG transforms, with styles applied via CSS classes and attributes, including custom fill colors, strokes, and a rounded line join on the path. It shows how raw SVG markup combined with CSS can create a static composition without any JavaScript libraries. The rendering approach relies on the browser’s native SVG support, with the `.lines` class controlling stroke properties.

Hhanulik.ondrej@gmail.com

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how fill colors, stroke widths, and transforms like scaling and translation affect rendering, with groups applying shared properties such as stroke and fill. The code uses raw SVG elements (circle, rect, line, path) and CSS classes (like `.lines` for stroke styling) rather than a JavaScript visualization library. The HTML embeds the SVG directly, while the stylesheet controls global margins and stroke properties.

Aanuj1450

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements styled with CSS. It shows shape customization through fill colors, stroke properties, and grouped transformations like scaling and translation. The code directly uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` tags, with CSS classes like `.lines` applying stroke styling. Rendering relies on inline SVG within an HTML page, with no additional JavaScript libraries.

RRC

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 demonstrates how to create simple geometric shapes—a circle and a rectangle—using inline SVG elements within an HTML page, with CSS applied for styling. The SVG canvas is set to 960 by 500 pixels, and the shapes are positioned using explicit `cx`, `cy`, `x`, and `y` attributes. The stylesheet defines a `highlighted` class that turns text red, while the body margin is reset for a clean display. The rendering relies on native SVG markup and CSS rules, with no external JavaScript libraries or data sources involved.

Mmkdeeps01

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to build basic geometric shapes using raw SVG elements and CSS. It shows circles, rectangles, lines, and a path rendered on an SVG canvas of 960 by 500 pixels. The code applies inline attributes like fill, stroke, stroke-width, and transform to style and position each shape, including a grouped set with yellow fill and black stroke. A purple rectangle and red circle highlight shape customization, while the stylesheet sets page margins and overflow properties.

Ssslee8778960

92% match