Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
GGiant316
Last edited Dec 27, 2019
Created on Dec 27, 2019
Forked from Cars Report

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

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.

Vveagy
95% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a polyline path—styled through inline attributes and an external CSS stylesheet. It shows how presentation attributes like `fill`, `stroke`, and `stroke-width` can be overridden by CSS rules, as seen with the `.lines` class applying black strokes. The SVG is scaled using a transform and grouped with translation to position elements, while CSS handles global layout. The code uses raw SVG elements and CSS, with no data or interaction.

Ssbgatech
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

A collection of basic SVG shapes—circles, rectangles, lines, and a path—demonstrates how CSS can style SVG elements. It shows how SVG’s transform attribute scales and translates groups of shapes, while CSS classes like `.lines` apply stroke, stroke-width, and linejoin properties. The example uses raw SVG markup embedded in HTML, with no JavaScript libraries, and the rendering is handled directly by the browser’s SVG engine.

Ccwanca
94% match
Loading thumbnail…

Shapes with SVG and CSS

A simple SVG scene demonstrates basic shapes and styling with pure web standards. Circles and rectangles appear in groups, with some shapes filled using CSS or inline attributes, while a third group applies a shared fill and black stroke. A polyline and path use a CSS class to set stroke properties, including a rounded line join. The example uses raw SVG elements and external CSS, with no JavaScript libraries, over a fixed 960 by 500 viewport.

33ology
94% match
Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes—a circle, a rectangle, and a polyline path—rendered with inline SVG elements and styled via external CSS. The example demonstrates how CSS classes control stroke color, width, and fill, including a blue path with rounded line joins. It uses raw SVG tags like `circle`, `rect`, `line`, and `path`, with a transform applied to scale and translate the group. The code exercises standard SVG geometry and CSS styling rules without any JavaScript or additional libraries.

Wwukangqian
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in SVG with CSS-based styling. The shapes are organized into groups: the top two rows show default black fills, the third row applies a teal fill and black stroke via a `g` element’s presentation attributes, and the bottom group uses the `.lines` class to style a polyline with a thick orange stroke. The code uses raw SVG elements (`circle`, `rect`, `line`, `path`) and CSS selectors to control colors, stroke widths, and line joins, with a `transform="scale(1.5)"` applied to the entire drawing.

Cclaudiatomateo
94% match
Loading thumbnail…

Shapes with SVG and CSS

A collection of SVG shapes demonstrates basic geometric styling and grouping. Circles, rectangles, lines, and a path are rendered with varied fills, strokes, and transforms. The example uses native SVG elements directly in HTML, with CSS classes like `.lines` controlling stroke properties and attributes such as `stroke-linejoin` for path corners. No external libraries are used; rendering relies entirely on SVG markup and CSS styling.

Eeco2nomy
94% match