Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
NNita
Last edited Aug 6, 2019
Created on Aug 6, 2019

This example demonstrates how SVG shapes can be styled using both inline attributes and CSS rules. It shows circles, rectangles, lines, and a path, with shapes rendered in default black, explicit fill colors like red and green, and a group with a light blue fill and black stroke. The code uses SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, applying CSS classes for stroke styling and the `transform` attribute for scaling and translation. Rendering is handled directly through browser SVG support.

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

Shapes and Colors with SVG and CSS

This example demonstrates how basic SVG shapes—circles and rectangles—can be styled and transformed using CSS. The graphic shows a progression from default black fills to explicit color fills, then a group with a custom light-blue fill and black stroke, and finally a connected polyline path. The code relies on native SVG elements like `<circle>`, `<rect>`, `<path>`, and the `<g>` container, while CSS classes such as `.lines` apply stroke properties and line joins. The inline `transform` attributes handle scaling and translation, and all shapes are embedded directly in the HTML without external data.

Vvigneshatreya4
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled directly with CSS and inline attributes. The visual shows shape color, stroke, and coordinate transformations, including scaling and translation. The code uses plain SVG elements within an HTML document, with a linked stylesheet defining stroke properties for line and path groups. The rendering approach relies entirely on SVG markup and CSS rules, with no JavaScript libraries involved.

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

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled with CSS, using primitive elements such as circles, rectangles, lines, and paths. The graphic shows default black fills, an explicitly filled red circle and green rectangle, and a group with a light blue fill and black stroke, all scaled via a transform. It also includes a polyline path and a line rendered without fill. The code relies on standard SVG markup within an HTML document, linked to an external stylesheet, and does not use any JavaScript libraries.

Bbukbukbukka
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 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
94% match