Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
Bbatool22
Last edited Aug 4, 2019
Created on Aug 4, 2019

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes and CSS classes. The first shapes use default black fills, while others apply explicit `fill` and `stroke` properties, with a group inheriting a light-blue fill and black stroke. A `.lines` class sets stroke width, and a nested path rule overrides color, line join, and caps. The graphic is scaled using an SVG `transform`, and the document links to an external stylesheet for presentation.

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 how SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using both inline attributes and an external CSS stylesheet. The first two shapes use default black fills, while later shapes apply explicit fills like red and a green hex code, and a group-level fill with a black stroke. CSS class `.lines` sets stroke color and width, with a nested rule for path line joins. The rendering uses raw SVG in an HTML file, with a scale transform and translated groups.

Aarg04
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes, presentation attributes, and CSS classes. It shows shapes with explicit fills, a group using inherited fill with black strokes, and a separate group for lines with round stroke caps and joins. The code uses raw SVG elements, the `g` transform for scaling and translation, and a linked CSS stylesheet to define stroke properties for the `.lines` class, with no JavaScript or external libraries.

Sshahbaj1999
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS-based styling. It shows circles and rectangles with default black fills, then explicit color fills using named colors and hex values, and finally a group with a light blue fill and black stroke. A separate group uses the CSS class `lines` to apply stroke properties to line and path elements. The SVG is scaled using a transform attribute, and styles are defined in an external stylesheet, with all rendering handled directly through SVG markup.

Aalshami52
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS-based styling. It shows circles and rectangles with default black fills, then explicit color fills using named colors and hex values, and finally a group with a light blue fill and black stroke. A separate group uses the CSS class `lines` to apply stroke properties to line and path elements. The SVG is scaled using a transform attribute, and styles are defined in an external stylesheet, with all rendering handled directly through SVG markup.

Aalshami52
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through inline attributes and CSS classes. It shows how fill colors, stroke widths, and line joins can be applied both directly and via stylesheet rules, with groups using transforms for scaling and translation. The SVG is rendered inline in HTML, with the `.lines` class controlling stroke properties and path-specific rounded joins and caps.

SSachithraanu
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes, including circles, rectangles, lines, and paths, can be styled with inline attributes and CSS classes. It shows the same shapes rendered in default black, with explicit fill colors, and with a group-level fill and stroke applied via a transform. The code uses SVG elements directly within an HTML document, relying on CSS selectors like `.lines` and `.lines path` to set stroke properties. A scale transform enlarges the entire scene for display.

MMichael Todd
94% 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
94% 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
94% match