Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Apr 10, 2023

Created on Apr 10, 2023

This example demonstrates basic geometric shapes rendered on an SVG canvas inside an HTML page. It shows a yellow circle with a red stroke, a blue rectangle with an orange stroke, and a black polyline path. The shapes are defined directly in the markup using SVG elements such as `<circle>`, `<rect>`, and `<path>`. Styling is applied through SVG presentation attributes like `fill` and `stroke-width`, without any external CSS or JavaScript libraries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how simple geometric shapes—a yellow circle with a red stroke and a blue rectangle with an orange stroke—can be drawn directly in an SVG canvas. The code uses inline SVG elements (`circle` and `rect`) styled via presentation attributes like `fill` and `stroke-width`, with the page structured by plain HTML. No external libraries are used; the shapes are static and rendered by the browser’s SVG engine, providing a minimal illustration of primitive vector graphics.

Ddevansh1407

96% 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

94% 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 shows how basic geometric shapes can be arranged and styled within an SVG canvas, using both inline attributes and CSS classes. It demonstrates a red circle, a green rectangle, and a blue group containing two rectangles and a circle, with a black line and a yellow path outlined. The rendering relies on SVG elements like `<rect>`, `<circle>`, `<line>`, and `<path>`, while the linked `styles.css` file provides global styling, including a `.highlighted` rule. Shapes are positioned directly via absolute coordinates and transformed using the `translate` attribute.

RRonaldKaweesi

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Iikimes

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 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