Shapes and Colors with SVG and CSS 2

100%

Shapes and Colors with SVG and CSS 2

✓ Published1🌍 Public

Last edited Mar 12, 2020

Created on Mar 12, 2020

Forked from Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS classes can be combined to create colorful, layered graphics. It shows circles, rectangles, lines, and a path arranged with nested transforms, using fill and stroke attributes to assign colors. The code relies on native SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, while a separate stylesheet defines the `.lines` class for stroke width, red color, and the path’s teal stroke. A `<g>` element uses a scale transform and global fill, with local overrides for specific shapes.

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 2

This example displays a static collection of SVG shapes, including circles, rectangles, lines, and a path, arranged in a blue-filled group with nested translations and scales. It demonstrates how SVG elements inherit fill and stroke styles from parent `<g>` tags, while individual shapes can override these attributes with inline values or CSS classes. The visualization uses raw SVG markup with CSS rules defined in an external stylesheet, where the `.lines` class applies red strokes and custom path styling. No JavaScript libraries are involved; rendering relies entirely on the browser’s native SVG support.

Xxhoumba

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 circles, rectangles, lines, and a path. It shows inline presentation attributes like `fill` and `stroke` alongside a `<g>` element that applies shared styles, and CSS classes that define stroke properties for line elements. The SVG is scaled with a transform, and the page hides overflow. The code uses raw SVG markup with no JavaScript libraries, relying on CSS for line styling.

Eegrebing

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be styled directly with CSS, showing circles, rectangles, lines, and a path within a single scalable vector graphic. The visualization uses plain SVG markup for the shapes and a linked stylesheet to apply stroke, fill, and line styling, including classes like `.lines` for grouped elements. A nested `<g>` element with a transform applies scaling to the entire composition. The code relies solely on native SVG elements and CSS, without external JavaScript libraries, and uses inline attributes like `fill` and `stroke` for basic color specification.

Wwen787

93% 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

93% 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

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a simple graphic. It shows circles, rectangles, lines, and a path, with colors applied directly through attributes or inherited from a group. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with CSS classes to define stroke properties. A nested `<g>` element applies a translation and fill color to multiple shapes, while the overall SVG is scaled using a transform. The example highlights basic SVG structure and CSS integration without any JavaScript libraries.

Hhappybubblefish

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling combine to create a static composition of circles, rectangles, lines, and a path. The code uses plain SVG elements like `circle`, `rect`, `line`, and `path`, grouped with the `g` element and transformed with `scale` and `translate`. CSS classes such as `.lines` apply stroke properties, while inline attributes set fill colors like red, green, and yellow. The rendering is entirely SVG-based, with no external libraries or data sources, relying on declarative markup and stylesheets.

Mmusevvid

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—positioned and styled through SVG attributes and CSS classes. It shows how shapes inherit fill and stroke properties from a parent `<g>` element, how transforms like `scale` and `translate` reposition entire groups, and how CSS rules can assign stroke color and width to line elements. The code uses raw SVG markup and linked CSS styles, with no JavaScript or external visualization libraries.

BBrett Cunningham

93% match