Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published3🌍 Public

Last edited Oct 23, 2020

Created on Oct 23, 2020

This example demonstrates how SVG shape elements are styled using both presentation attributes and CSS. It shows circles, rectangles, lines, and a path, with solid colors, strokes, and transforms applied. The code uses vanilla SVG markup with CSS rules from an external stylesheet, including a `.lines` class to set stroke properties. A `<g>` element applies `fill`, `stroke`, and `stroke-width` as inherited attributes, while another group uses a `translate` transform. The example highlights how CSS and SVG attributes interact to control visual appearance.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling, showing circles, rectangles, lines, and a path arranged in scaled and translated groups. The visualization uses raw SVG elements—including circle, rect, line, and path—with attributes like fill, stroke, and stroke-width, while CSS classes define stroke properties and line joints. The `<g>` elements apply transforms for scaling and positioning, with one group inheriting fill and stroke settings from its parent. The code relies solely on native SVG and CSS, with no external JavaScript libraries.

Ppengyugatech

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—positioned and styled directly in HTML. It shows how CSS classes and inline attributes control fill colors, strokes, and grouping via SVG `<g>` elements. The code uses no external libraries, relying on native SVG elements and a linked `styles.css` file for styling. A global transform translates a grouped set of shapes, while the `.lines` class applies black strokes with a green, round-joined path, illustrating CSS’s role in SVG presentation.

AAloha1403

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a variety of basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It shows how fill colors, stroke widths, and stroke-linejoin properties are applied directly to elements or via CSS classes like `.lines`. The visualization uses raw SVG markup within an HTML page, leveraging a `<g>` element with transforms for scaling and translation. The rendering relies solely on standard SVG APIs and CSS, with no JavaScript libraries involved.

HHasideluxe

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with inline presentation attributes and CSS styling. It shows circles, rectangles, a line, and a path, with inherited visual properties applied to grouped elements. The code uses raw SVG elements within an HTML document, applying a scale transform to the entire canvas and a translate transform to a subgroup. CSS classes control stroke and line-join for the path, while group-level presentation attributes set fill and stroke for child shapes. The example highlights how SVG presentation attributes can be overridden by CSS rules, enabling flexible styling control.

Ssilenusrich

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using Cascading Style Sheets (CSS). It uses circles, rectangles, lines, and paths within an SVG `<g>` element, showing effects like scaling, translation, fill colors, stroke properties, and stroke-linejoin styling. The stylesheet (`styles.css`) applies black strokes and a specific rounded line join to path elements, while inline SVG attributes provide fill colors. The rendering occurs directly in the browser using standard SVG syntax, with no JavaScript libraries involved, relying purely on SVG and CSS techniques.

Iianleekq

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and positioned using inline attributes and CSS classes. The code uses raw SVG elements within an HTML document, applying transformations via the `transform` attribute and custom styling through an external stylesheet. A `g` element with the class `lines` overrides default stroke settings, while the CSS file defines properties like stroke width and color for both `line` and `path` elements. The visualization showcases basic vector graphics rendering without any JavaScript or external libraries.

Kkestefon

94% match

Loading thumbnail…

Shapes with CSS + SVG

This example demonstrates basic geometric shapes rendered with SVG, comparing their default styling, explicit fill attributes, and inherited presentation properties. It uses raw SVG elements such as `circle`, `rect`, `line`, and `path` within a `<g>` container that applies a scale and translation transformation. CSS, via `styles.css`, defines a monospaced body font and strokes for the line group, including a rounded line join on the path. The code shows how shape attributes and CSS rules interact to control color, stroke width, and the overall visual appearance.

AAditya Kumar

94% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes, presentation attributes, and CSS classes. It shows shapes with explicit fills, a group using inherited fill with black strokes, and a separate group for lines with round stroke caps and joins. The code uses raw SVG elements, the `g` transform for scaling and translation, and a linked CSS stylesheet to define stroke properties for the `.lines` class, with no JavaScript or external libraries.

Sshahbaj1999

94% match