Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

LLiu2021311512

Last edited Apr 7, 2022

Created on Apr 7, 2022

A pair of gray circles and rectangles appear in the top row, while a red circle and green rectangle sit directly below them, demonstrating basic SVG shape styling with fill colors. A set of black lines and a rounded, teal polyline path are also drawn, using stroke and stroke-linejoin properties from CSS. The example relies on raw SVG elements—circle, rect, line, and path—with no external JavaScript libraries, rendering shapes directly in the browser via the SVG markup and a linked stylesheet.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through inline attributes and CSS classes. It shows uncolored shapes, shapes with explicit fill colors, and a group with inherited fill and stroke properties. The code uses raw SVG elements within an HTML page, linked to a separate stylesheet that applies stroke width, colors, and round line joins. No JavaScript libraries are involved; rendering relies entirely on the browser’s native SVG support.

烽烽火戏猪猴

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG and CSS can be used to draw and style basic geometric shapes, including circles, rectangles, lines, and a path. The SVG markup positions each shape within a 960x500 canvas, with a group transformation scaling the entire drawing. CSS classes, such as `.lines`, apply stroke properties and a line-join style to the path, while individual elements use inline attributes like `fill` and `stroke-width`. The code relies solely on standard SVG elements and CSS styling, with no external JavaScript libraries or data sources involved.

YYUXUE LIU

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged on a 960x500 canvas. It demonstrates how SVG graphics are used directly in HTML. The code uses SVG elements like `<circle>`, `<rect>`, and `<line>`, with a CSS stylesheet defining stroke attributes for grouped `.lines` elements. Some shapes have explicit fill colors, while a transformed group applies a teal fill and black stroke. Rendering is done entirely with inline SVG.

RRoger Yu-Hsiang Lo

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling. It shows circles, rectangles, lines, and paths arranged within a scaled and translated group, with some shapes inheriting fill colors from their parent groups and others styled directly through CSS classes. The HTML embeds the SVG directly, while the linked stylesheet defines stroke properties for line elements using class selectors. The code uses standard SVG elements and CSS selectors to control visual attributes like fill, stroke, and stroke-width, with no external JavaScript libraries involved.

Mmuxiaofan

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

A set of SVG shapes demonstrates styling with both inline attributes and CSS rules. Circles, rectangles, a line, and a polyline-like path are arranged within a transformed group. Inline fill and stroke properties define basic colors, while a CSS class applies stroke width and line join styles to the path elements. The example uses only standard SVG elements and external CSS, with no JavaScript libraries involved.

Vveagy

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled and transformed using CSS and inline SVG attributes. It shows how fill colors, stroke widths, line joins, and group-level transformations like scaling and translation affect the rendering. The code uses native SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`) within an HTML document, with CSS rules from `styles.css` targeting the `.lines` class for stroke styling. The visualization is purely declarative, with no JavaScript or external libraries beyond the SVG markup itself.

Jjunge870214

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements, styled and positioned through CSS and inline attributes. The visualization shows two circles and two rectangles, first with default black fills, then with explicit red and green fills, and finally a group with a light blue fill and black stroke. Additional lines and a path illustrate stroke styling with a thick black outline. The code uses plain SVG markup within an HTML page, with minimal CSS to reset the body margin and hide overflow. The rendering approach relies entirely on native SVG capabilities without any JavaScript libraries.

XXin Li

92% match