Shapes with SCG and CSS

100%

Shapes with SCG and CSS

✓ Published0🌍 Public

Last edited Oct 27, 2019

Created on Oct 27, 2019

This example demonstrates basic SVG shape rendering with inline presentation attributes and CSS styling. Circles and rectangles are drawn using `<circle>` and `<rect>` elements, with some shapes inheriting fill and stroke properties from a parent `<g>` group. A separate group classed as `lines` contains a `<line>` and a `<path>` element, both styled with thick black strokes via CSS, while the path receives a pink stroke color and round line joins. The SVG canvas is scaled with a `transform` attribute, and the page uses an external stylesheet to apply global layout and stroke rules.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SCG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and CSS. It shows how SVG elements inherit styling from parent `<g>` groups and how CSS classes can apply strokes and fill colors. The code uses the SVG API directly with elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, rendered in a 960x500 viewport. The CSS file defines stroke properties for the lines group, while inline attributes handle fills and specific stroke widths.

Jjeffko18

95% match

Loading thumbnail…

Shapes with SCG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—stylized through both inline attributes and CSS rules. The code uses raw SVG elements within an HTML document, with a `g` element applying transforms for scaling and translation. CSS classes like `lines` and `lines path` control stroke color, width, and line joining for the line and path elements, while inline `fill` and `stroke` attributes override or complement those styles. The visualization shows how SVG presentation attributes interact with CSS specificity and inheritance.

SShuyu Zheng

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged within a single canvas, with styling applied through an external CSS file. It shows how SVG elements inherit presentation attributes like fill and stroke, and how grouping with `<g>` allows applying uniform properties or transforms, such as scaling and translation, to multiple shapes at once. The visualization uses raw Scalable Vector Graphics markup and CSS selectors, including a `.lines` class that customizes stroke width and color for specific elements, highlighting the interplay between inline attributes and stylesheet rules.

Sssd4

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

92% match

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

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS classes. The SVG canvas is scaled and translated using transform groups, showing how shape fill, stroke, and stroke-width properties work. It uses raw SVG elements with CSS from `styles.css` to apply black strokes and rounded line joins to path elements. The rendering relies entirely on standard SVG markup and CSS, with no additional JavaScript libraries.

Jjediknight956

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how CSS classes and inline presentation attributes combine to style SVG shapes, with circles, rectangles, lines, and a path shown in a single canvas. The SVG is scaled, and a group with the class `lines` applies black strokes and blue, round-joined paths via the stylesheet. Rendered with SVG and styled through CSS, it uses the `<g>` element for grouping and `transform` attributes for positioning and translation.

Ssarakouz

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered together in a single canvas. It shows how CSS classes control stroke and fill properties for groups and individual elements. The code uses raw SVG markup with inline attributes like `fill`, `stroke`, and `transform`, while styling comes from an external stylesheet. It includes static shapes without animation, highlighting how SVG’s `<g>` grouping and `translate` and `scale` transforms arrange geometry spatially.

Ddmcgown3

91% match