Shapes and Colors with SVG and CSS

100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public

Last edited Nov 7, 2020

Created on Nov 7, 2020

Forked from Shapes and Colors with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using both inline attributes and CSS classes. A root `<g>` element applies a global scale transform, while nested groups use translate to position shape clusters, with one group inheriting fill and stroke styles and another defining thick, rounded line styles via the `.lines` class. The SVG is rendered directly in HTML with a 960×500 viewport, and CSS controls body margins and line appearance.

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

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

94% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using inline attributes and CSS. It shows how fill colors, stroke widths, transforms like scaling and translation, and grouped elements control appearance. The code uses plain SVG elements within an HTML document, with a linked stylesheet defining classes for stroke properties. No JavaScript libraries are involved; rendering relies entirely on the browser’s native SVG support and CSS rules.

CCurran Kelleher

94% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and an external CSS stylesheet. It shows how presentation can be controlled at the element level with `fill` and `stroke` properties, or grouped and applied via CSS classes like `.lines`. The SVG uses `<g>` elements with `transform` attributes for scaling and translation, combining default styling, explicit fills, and CSS-defined strokes to illustrate layered control over vector graphics rendering.

TTheRoadSign

93% 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 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 basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS and inline attributes. It shows how fill colors, strokes, stroke widths, and line joins can be applied directly to SVG elements or via CSS classes. The SVG is scaled using a transform, and a group with a translate offset positions additional shapes. It uses plain SVG markup with a linked stylesheet, without any JavaScript libraries, to illustrate fundamental vector rendering and styling techniques.

Xxenin3

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered with CSS styling and inline presentation attributes. A transform scales the entire group, while a nested group translates shapes and applies fill and stroke properties. The `.lines` class sets stroke width and color, with path-specific rules for rounded line joins and caps. It uses raw SVG elements in HTML with a linked stylesheet, showing how CSS can control vector graphics without any JavaScript libraries.

Llamiyaa

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