Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
Ffasynator
Last edited Mar 9, 2020
Created on Mar 9, 2020

This example demonstrates SVG shapes and CSS styling, showing circles, rectangles, lines, and paths arranged with transforms and grouped elements. It illustrates how inline attributes like `fill`, `stroke`, and `stroke-width` combine with external stylesheet rules targeting classes such as `.lines` and `.lines path` for stroke color and line joins. The rendering uses raw SVG markup within an HTML page, with a CSS file controlling layout and visual 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

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

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be defined and styled using CSS. It shows circles, rectangles, lines, and paths, with some shapes using inline `fill` and `stroke` attributes and others inheriting styles from CSS classes. A group element applies a `translate` transform and sets default `fill` and `stroke` properties, while the CSS rule for the `.lines` class specifies stroke width and color for the line and path elements. The rendering relies entirely on SVG markup, CSS, and transforms.

RRajneesh Kumar
94% match