Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published2🌍 Public
Aarg04
Last edited Jul 1, 2020
Created on Jul 1, 2020

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using both inline attributes and CSS rules. It shows default black shapes, shapes with explicit `fill` colors, a group with a cyan fill and black stroke, and a separate group of lines and paths styled via CSS classes. The rendering uses SVG elements placed in an HTML page, with the `styles.css` file providing stroke width, color, and line-join properties for the `.lines` class and its path child.

AAlessan123
96% 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
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

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.

Bbatool22
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 how basic SVG shapes can be styled and transformed using both inline attributes and CSS rules. Circles, rectangles, lines, and paths are arranged with scaling and translation transforms, while colors are applied through fill and stroke properties. The code relies on raw SVG elements and a linked stylesheet to control stroke width, line joins, and caps. A group with the class "lines" inherits black strokes, but its path overrides the stroke color, showing the cascade of CSS specificity.

FFumiko Toyoda
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS, using inline SVG elements in an HTML page. It shows how default black fills contrast with explicit red and green fills, while a group with `fill="#adf6ff"` and `stroke="black"` applies shared styling to multiple shapes. The `.lines` class in styles.css sets stroke color and width, with path-specific overrides for rounded joins and caps. The SVG uses `<g>` elements with `transform` attributes for scaling and translation, and CSS rules handle body margins and overflow without external libraries.

Ffasynator
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