Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published1🌍 Public
Hhirokat
Last edited Jan 23, 2020
Created on Jan 23, 2020

This example shows how to create basic geometric shapes and apply colors and styles using SVG and CSS. It draws circles and rectangles with default black fills, explicit fills set via the fill attribute, and a group with a shared fill and stroke applied through presentation attributes. A separate group uses the CSS class .lines to define stroke properties for a line and a polygonal path. The SVG is rendered inline in an HTML file, with all styling done in a linked stylesheet.

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

Shapes with SVG and CSS

This example demonstrates how to create geometric shapes using SVG elements and style them with CSS. It shows circles, rectangles, lines, and a path, with some shapes filled with a cyan color and others inheriting default styling. The code uses a CSS class to apply stroke attributes to line and path elements, while inline attributes define fill colors and transforms for grouping. The example renders entirely with SVG markup in an HTML document, with a linked stylesheet that resets the body margin and hides overflow. The design illustrates basic SVG composition, grouping, and styling techniques without JavaScript.

Tthespiraltree
94% 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
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 with SVG and CSS

This example demonstrates how to create basic geometric shapes using SVG and style them with CSS. Circles and rectangles are drawn with varying fill colors and stroke properties, while a group of lines and a path illustrate coordinate-based drawing. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path`, with CSS rules in `styles.css` controlling stroke width, color, and line joins. The rendering relies on the browser’s native SVG support, with transformations applied via the `transform` attribute.

Hhugomell
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape creation and styling through both inline attributes and CSS classes. It shows circles, rectangles, lines, and a polygonal path positioned with SVG transform groups. The code uses native SVG elements inside an HTML document, with a linked stylesheet defining stroke and fill properties for grouped elements. A parent group applies a scale transform, while nested groups use translation to offset shapes, and the `.lines` class controls stroke appearance for the path and line elements.

PPatrickHennessey
94% match