Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
JJosé
Last edited Jul 17, 2020
Created on Jul 15, 2020

The example demonstrates how SVG shapes—circles, rectangles, lines, and paths—are styled with inline attributes and CSS classes to create a colorful, layered composition. It shows grouped elements inheriting fill and stroke properties, while a dedicated `.lines` class applies thicker stroke styling to line and path elements. The code uses plain SVG markup within an HTML document, with CSS rules controlling the body margin and line appearance, and applies a scaling transform to the entire group for visual emphasis.

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, 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 how basic SVG shapes like circles, rectangles, lines, and paths can be styled through both inline attributes and external CSS. It shows the effect of applying fills, strokes, stroke widths, and transforms such as scaling and translation. The code uses plain SVG within an HTML document, with a linked stylesheet defining classes like `.lines` for stroke properties and `path` styling. The rendering approach relies on static SVG markup, with no data binding or interaction.

Jjufrank
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can combine to create a static, colorful composition. The code renders circles, rectangles, lines, and a path within a single SVG element, using inline attributes for some fills and CSS classes for others. It shows the effect of grouping elements with transformations, such as scaling and translation, to reposition shapes as a unit. The `.lines` class applies strokes and line joins via CSS, while the SVG elements define geometry directly in the markup.

MMinuraSilva
94% 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
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a polyline path—styled through inline attributes and an external CSS stylesheet. It shows how presentation attributes like `fill`, `stroke`, and `stroke-width` can be overridden by CSS rules, as seen with the `.lines` class applying black strokes. The SVG is scaled using a transform and grouped with translation to position elements, while CSS handles global layout. The code uses raw SVG elements and CSS, with no data or interaction.

Ssbgatech
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
93% 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
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a range of SVG shape elements—circles, rectangles, lines, and paths—styled through both inline attributes and external CSS. It shows how fill colors, stroke widths, and stroke styles can be applied directly on elements or inherited from parent `<g>` groups. The code uses plain SVG markup with CSS selectors like `.lines` and `.lines path` to set stroke properties, and employs transforms for scaling and translation. No JavaScript libraries are used; rendering relies entirely on native SVG and CSS.

JJepyagg
93% match