Shapes with CSS and SVG

100%

Shapes with CSS and SVG

✓ Published0🌍 Public

Last edited Mar 28, 2020

Created on Mar 28, 2020

This example shows a collection of basic geometric shapes—circles, rectangles, lines, and a path—arranged on an SVG canvas. It demonstrates how raw SVG elements can be styled using both inline attributes like `fill` and `stroke` and external CSS rules. The code also groups shapes with `<g>` elements to apply translation transforms and shared stroke properties, illustrating compositing and coordinate manipulation. The visualization relies directly on the SVG API within an HTML document.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic geometric shapes—circles, rectangles, a line, and a path—all rendered inside a single SVG canvas. It demonstrates how CSS classes control vector styling, such as setting the stroke color, width, and line-join for the line and path elements, while inline attributes like `fill` and `transform` handle shape-specific properties and scaling. The code uses raw SVG elements and a linked stylesheet, with no external JavaScript libraries.

Ffbudwill

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered together in a single canvas. It shows how CSS classes control stroke and fill properties for groups and individual elements. The code uses raw SVG markup with inline attributes like `fill`, `stroke`, and `transform`, while styling comes from an external stylesheet. It includes static shapes without animation, highlighting how SVG’s `<g>` grouping and `translate` and `scale` transforms arrange geometry spatially.

Ddmcgown3

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic geometric shapes—circles, rectangles, lines, and a path—arranged in overlapping groups against a blank canvas. It demonstrates how SVG elements can be styled and transformed using CSS classes and inline attributes. The code uses raw SVG markup with a `<g>` element for grouping, and applies styling through a linked stylesheet that sets stroke widths and colors. The visible transformations include scaling and translation, with the rendering approach being purely static SVG without any JavaScript libraries or data sources.

SShengjie-Sun

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged within a single canvas, with styling applied through an external CSS file. It shows how SVG elements inherit presentation attributes like fill and stroke, and how grouping with `<g>` allows applying uniform properties or transforms, such as scaling and translation, to multiple shapes at once. The visualization uses raw Scalable Vector Graphics markup and CSS selectors, including a `.lines` class that customizes stroke width and color for specific elements, highlighting the interplay between inline attributes and stylesheet rules.

Sssd4

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic geometric shapes, including circles, rectangles, a line, and a path, rendered within a 960 by 500 pixel SVG canvas. The shapes demonstrate various SVG presentation attributes, such as fill colors, stroke colors, and stroke widths, applied both directly and through the `<g>` grouping element. The visualization uses the SVG rendering API with an HTML page and a linked CSS stylesheet, where CSS is only used for global body styling and a non-applied `.highlighted` class. It does not incorporate any JavaScript libraries or external data.

AAlessan123

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a variety of basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It shows how fill colors, stroke widths, and stroke-linejoin properties are applied directly to elements or via CSS classes like `.lines`. The visualization uses raw SVG markup within an HTML page, leveraging a `<g>` element with transforms for scaling and translation. The rendering relies solely on standard SVG APIs and CSS, with no JavaScript libraries involved.

HHasideluxe

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with CSS styling, showing circles, rectangles, lines, and a path arranged in scaled and translated groups. The visualization uses raw SVG elements—including circle, rect, line, and path—with attributes like fill, stroke, and stroke-width, while CSS classes define stroke properties and line joints. The `<g>` elements apply transforms for scaling and positioning, with one group inheriting fill and stroke settings from its parent. The code relies solely on native SVG and CSS, with no external JavaScript libraries.

Ppengyugatech

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS classes. The SVG canvas is scaled and translated using transform groups, showing how shape fill, stroke, and stroke-width properties work. It uses raw SVG elements with CSS from `styles.css` to apply black strokes and rounded line joins to path elements. The rendering relies entirely on standard SVG markup and CSS, with no additional JavaScript libraries.

Jjediknight956

94% match