Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Nov 13, 2019

Created on Nov 13, 2019

This example displays geometric shapes—circles, rectangles, a line, and a path—arranged in a grid, with colors and strokes varied through nested SVG groups. The visualization uses raw SVG elements (circle, rect, line, path) with CSS for page styling and transform attributes for scaling and translation. Fill and stroke properties are set directly on elements or inherited from parent `<g>` groups, demonstrating how SVG’s group hierarchy controls visual inheritance and positioning without additional libraries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements and style them with CSS. It shows circles and rectangles with both fill colors applied directly as attributes and groups of shapes where the fill is inherited from an enclosing `<g>` element. The visualization also illustrates how to draw lines and paths, with the line stroke properties defined in a stylesheet. The rendering uses raw SVG markup within an HTML page, with CSS selectors targeting the `.lines` class to apply stroke color and width.

CChristopher A. Pfeifer

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how basic geometric shapes like circles, rectangles, lines, and paths are drawn and arranged using SVG elements. It demonstrates SVG transforms, including scaling and translation, to position and resize shapes, as well as CSS classes to control stroke color, width, and line joins. The visualization uses raw SVG markup with inline attributes for fill and stroke, alongside a stylesheet (`styles.css`) for styling. The layout is static, strictly demonstrating fundamental SVG and CSS techniques without any data binding or interaction.

BBryan Liu

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and styling applied through CSS. Several circles and rectangles are arranged in a grid, with some shapes using inline fill colors while others inherit styling from CSS rules and attribute selectors. Lines and paths are grouped together and transformed using SVG translate and scale operations. The visualization relies on standard SVG elements and CSS properties, rendering directly in the browser.

RRandika87

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG, using circles, rectangles, lines, and paths arranged in a grid. The shapes are styled through inline attributes and CSS classes, with color variations and stroke effects applied to specific groups. The visualization uses raw SVG elements within an HTML document, with a stylesheet that defines properties for line joining and stroke widths. The rendering approach relies on SVG's native vector graphics, transformed and scaled via the `transform` attribute, without any external JavaScript libraries.

HHarish M A

93% match

Loading thumbnail…

Shapes with CSS and SVG

This example demonstrates various SVG shapes rendered directly on a page, including circles, rectangles, lines, and a path. The SVG markup applies styling through attributes and CSS, with group elements (`g`) using transforms and inherited fill and stroke properties. It also illustrates CSS class-based styling for the line and path elements via the `.lines` rule. The visualization uses raw SVG and CSS, with no additional libraries, showing how shape attributes and styles interact.

Aavirathtib

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

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

92% match