Shapes with SCG and CSS

100%

Shapes with SCG and CSS

✓ Published0🌍 Public

Last edited Oct 19, 2019

Created on Oct 19, 2019

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.

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

BBarryC7

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

94% 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 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 a collection of basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS and inline attributes. It shows how SVG elements inherit properties like fill and stroke from parent `<g>` groups and how CSS classes target specific elements, such as the `.lines` class, to apply stroke width and line-join styles. The graphic uses a coordinate system transformed by `scale` and `translate` operations to position shapes, rendering directly in the browser via SVG markup within an HTML file.

BBraja Gopal Das

92% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, and lines—stylized through both inline attributes and external CSS rules. The shapes are rendered with SVG elements within a 960×500 canvas, using explicit fill colors, stroke widths, and a transform scale applied to the entire group. A secondary group applies CSS classes to define stroke and path styling, while inline attributes handle direct color assignments. The code loads via standard HTML and links to a separate stylesheet, showcasing how SVG and CSS interact for visual customization.

JJordan Arnold

92% match

Loading thumbnail…

Shapes with SVG ans CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline SVG attributes and external CSS. It shows how CSS classes, such as `.lines`, override default SVG presentation properties like `stroke` and `stroke-width`, while `fill` and `stroke` attributes set directly on elements take precedence. The visualization is rendered entirely with SVG in static HTML, using no JavaScript libraries, and includes a group with a translation transform to position shapes collectively. The code also highlights inheritance of styling from parent `<g>` elements to child shapes.

MMateus Farias

91% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—rendered with inline attributes and CSS styling. The SVG canvas uses a scale transform, while grouped elements apply translations and shared fill, stroke, and stroke-width properties. CSS classes control line appearance and path corners, highlighting the interplay between presentation and structure. The code relies directly on SVG markup and CSS rules, with no external libraries, and serves as a baseline for understanding shape composition.

TTim

91% match