Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
Sshah417
Last edited Sep 7, 2019
Created on Sep 7, 2019

This example demonstrates basic SVG shapes and CSS styling. It shows circles, rectangles, lines, and a path, with some shapes using default black fill while others specify fill colors like red and green. A transformed group applies a light blue fill and black stroke with a thicker stroke-width on the circle. The CSS file styles the line and path elements with custom stroke colors and line joins. The SVG markup uses inline attributes, the `<g>` element for grouping, and CSS classes to control 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 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 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
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 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 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
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