Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
Vveagy
Last edited Sep 11, 2018
Created on Sep 11, 2018

A set of SVG shapes demonstrates styling with both inline attributes and CSS rules. Circles, rectangles, a line, and a polyline-like path are arranged within a transformed group. Inline fill and stroke properties define basic colors, while a CSS class applies stroke width and line join styles to the path elements. The example uses only standard SVG elements and external CSS, with no JavaScript libraries involved.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes demonstrates how presentation can be controlled through inline attributes and external CSS. Circles, rectangles, and a polyline are drawn with default black fills, then customized with explicit fill colors, stroke widths, and a translated group using a light blue fill. A separate line and path, grouped under a class `lines`, receive black strokes and rounded joints via stylesheet rules. The example uses raw SVG elements within an HTML document, styled by a linked `styles.css` file, with no JavaScript or data binding involved.

GGiant316
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to style basic SVG shapes, including circles, rectangles, lines, and paths, using both inline attributes and CSS rules. It shows the difference between setting fill and stroke properties directly on elements versus applying them through grouped selectors and classes. The graphic relies on SVG group elements for applying transformations and shared styling attributes, with CSS controlling the final appearance of line joins and stroke widths.

Ffra-alaimo
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using both inline attributes and CSS classes. It shows circles and rectangles with default and explicit fills, a group with blue shapes and black strokes, and a polyline with rounded joins. The code uses raw SVG elements within an `<svg>` container, applying `scale` and `translate` transforms, while a CSS class controls stroke properties on the line and path.

DDanteStack
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling. It shows circles, rectangles, a path, and a line, with some shapes using inline fill attributes and others inheriting styles from CSS classes. The SVG uses transform attributes like `scale` and `translate` to reposition groups of shapes, while the stylesheet applies stroke and stroke-width properties via class selectors, including specific styling for path elements.

Kketuckychix
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling. It shows circles, rectangles, a path, and a line, with some shapes using inline fill attributes and others inheriting styles from CSS classes. The SVG uses transform attributes like `scale` and `translate` to reposition groups of shapes, while the stylesheet applies stroke and stroke-width properties via class selectors, including specific styling for path elements.

Kketuckychix
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—rendered with inline attributes and CSS styling. The SVG canvas uses a scale transform, while grouped elements apply translations and shared fill, stroke, and stroke-width properties. CSS classes control line appearance and path corners, highlighting the interplay between presentation and structure. The code relies directly on SVG markup and CSS rules, with no external libraries, and serves as a baseline for understanding shape composition.

TTim
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using both inline attributes and CSS. It shows circles, rectangles, lines, and a path, with some shapes grouped to share fill and stroke properties, while the `lines` class applies black strokes and a rounded line join. The SVG viewport scales up by 1.5, and a translated group shifts lines and paths into place. The code uses raw SVG elements and CSS rules, with no external JavaScript libraries.

Wwoo
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with inline presentation attributes and CSS styling. It shows circles, rectangles, a line, and a path, with inherited visual properties applied to grouped elements. The code uses raw SVG elements within an HTML document, applying a scale transform to the entire canvas and a translate transform to a subgroup. CSS classes control stroke and line-join for the path, while group-level presentation attributes set fill and stroke for child shapes. The example highlights how SVG presentation attributes can be overridden by CSS rules, enabling flexible styling control.

Ssilenusrich
94% match