Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS 2

✓ Published0🌍 Public
Xxhoumba
Last edited Mar 12, 2020
Created on Mar 12, 2020

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.

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 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.

Xxhoumba
94% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined to create a simple, static visualization. It draws circles and rectangles with various fill colors, and includes a group that applies both a fill and stroke. A separate group of lines and a path demonstrates stroke styling with rounded joins and caps. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with CSS rules in styles.css controlling stroke properties, while inline attributes and nested `<g>` transforms handle layout.

Jjlbullerc
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 shows how SVG shapes and CSS styles combine to create a static composition of circles, rectangles, lines, and a path. The code renders without any JavaScript libraries, relying directly on SVG elements and a linked stylesheet. The stylesheet applies stroke properties to the lines group, and the markup uses inline attributes like `fill`, `stroke`, and `transform` to assign colors and positions. The `g` elements demonstrate grouping and coordinate-space transformations, while a path with a `non-scaling` stroke demonstrates stroke styling independent of the parent scale.

Eedxiao97
93% 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 how basic SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes and CSS classes. It shows the effects of fill colors, stroke widths, line joins, and grouped transformations such as scaling and translation. The rendering relies entirely on SVG elements styled by CSS, with classes like `.lines` controlling stroke properties and the `fill` attribute applying color. No JavaScript libraries are used; the visualization is purely static markup and styles.

Wwen787
93% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles combine to create static vector graphics. It shows circles and rectangles with distinct fill colors, including a group with a light blue fill and black stroke, alongside lines and a polyline path. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within a `<g>` container, with scaling and translation transforms applied. CSS classes control stroke properties, such as color, width, line join, and cap. No JavaScript libraries or data sources are used; everything is defined directly in HTML and an external stylesheet.

XXinYaoHuang
93% match