Shapes with SCG and CSS

100%

Shapes with SCG and CSS

✓ Published1🌍 Public

Last edited Jan 11, 2021

Created on Jan 11, 2021

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.

AI-generated description

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

94% match

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

93% 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 geometric shapes—circles, rectangles, lines, and a path—rendered in an SVG scene with inline styling and cascading style sheets. The visualization shows how SVG primitives combine with CSS classes to control appearance, such as setting fill colors, stroke widths, and line joins. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within a `<g>` container, with transformations applied via the SVG `transform` attribute. CSS rules in `styles.css` style the `.lines` group and its path, demonstrating separation of structure and presentation.

SShawn Kearney

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

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

PPourmahmood

92% match