Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
Mmirna981
Last edited Aug 26, 2019
Created on Aug 26, 2019

A set of basic SVG shapes demonstrates how presentation attributes and CSS rules combine to control fill, stroke, and geometry. Circles and rectangles are first styled with inline fill attributes, then grouped to inherit shared styling from a parent `<g>` element. A separate group of lines and a path uses CSS classes to set stroke color, width, line joins, and caps, overriding the shapes’ default black appearance. The example renders entirely through native SVG elements in an HTML document, with external stylesheet rules from `styles.css` applying presentation properties.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

A set of basic SVG shapes demonstrates how presentation attributes and CSS rules combine to control fill, stroke, and geometry. Circles and rectangles are first styled with inline fill attributes, then grouped to inherit shared styling from a parent `<g>` element. A separate group of lines and a path uses CSS classes to set stroke color, width, line joins, and caps, overriding the shapes’ default black appearance. The example renders entirely through native SVG elements in an HTML document, with external stylesheet rules from `styles.css` applying presentation properties.

Mmirna981
100% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape styling and CSS-based presentation through geometric primitives. The visualization shows circles, rectangles, lines, and a path rendered in an SVG canvas, with colors applied both through inline attributes (e.g., `fill="red"`, `fill="#83cc2a"`) and inherited group styles. The SVG uses `transform` for scaling and translation, while the `styles.css` file applies stroke properties to line and path elements via class selectors. The code relies entirely on native SVG APIs and CSS, with no external JavaScript libraries.

Mmirna981
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both presentation attributes and an external CSS stylesheet. It shows how fill colors can be set directly on elements (e.g., red, `#83cc2a`) or inherited from a parent `<g>` group, with stroke properties controlling outlines. The CSS classes `.lines` apply stroke width and color, while the path uses the `stroke-linejoin` and `stroke-linecap` properties. The SVG structure employs `transform` attributes for scaling and translation, rendering vector graphics directly in the browser without additional JavaScript libraries.

Mmi-desai
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through inline attributes and CSS classes. The code shows how fill colors, stroke widths, transparency, and geometric transforms like scaling and translation affect rendering. It uses raw SVG elements with CSS selectors (`.lines`, `.lines path`) to apply stroke properties, while a `<g>` element groups shapes to share fill and stroke settings. The rendering is pure SVG in an HTML page with no external libraries.

LLinkous
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—using both inline presentation attributes and CSS classes to control fill and stroke styles. It shows how group elements (`<g>`) apply shared transformations and styles, such as a `translate` offset and a unified fill color, while individual elements override these with explicit `fill`, `stroke`, and `stroke-width` values. The CSS rules target the `.lines` group to set black strokes for lines and a teal color with rounded joins and caps for the path. The code uses plain SVG markup within an HTML document, with the stylesheet defining properties like `overflow: hidden` on the body.

Ccatsugly66
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a range of basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and external CSS. It shows how fill colors, strokes, stroke widths, and line joins can be applied, with groups using transformations for scaling and translation. The rendering relies on raw SVG markup within an HTML page, combined with a linked stylesheet that defines classes like `.lines` for grouped styling. No JavaScript libraries are used.

Nnilimi
93% match
Loading thumbnail…

Shapes and Colors with SVG CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped using SVG’s `<g>` element. It demonstrates how fill colors, stroke widths, and transforms like translation and scaling affect shape rendering. The code uses raw SVG markup within an HTML file, linked to an external stylesheet that applies classes to set stroke properties. No JavaScript libraries are used; rendering relies entirely on the browser’s native SVG support.

VVvgupta
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A set of basic SVG shapes demonstrates core vector graphics and CSS styling. Circles and rectangles appear with inline fill attributes, a group applies shared fill and stroke properties, and a separate group uses CSS classes for stroke width and line styling. The example renders shapes with literal coordinates in an SVG element, using SVG presentation attributes and a linked stylesheet to control color and line appearance.

Jjufrank
93% match